Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom Class plugin broken #1137

Closed
garretwilson opened this issue May 14, 2017 · 6 comments
Closed

Custom Class plugin broken #1137

garretwilson opened this issue May 14, 2017 · 6 comments
Labels

Comments

@garretwilson
Copy link

I have my own style class annotation, which makes a little note icon appear in the text. As I explained elsewhere, this makes my <pre class="line-numbers"><code class="language-java"> sections have little note icons all over the place, because Prism hijacks the common name annotation for its own purposes (not bothering to prefix its style names to even attempt to avoid clashes).

I had hoped the custom class plugin would provide a workaround. I downloaded (minified) Prism with the "coy" theme, all languages, and the following plugins:

  • Line Numbers
  • Custom Class
  • Keep Markup
  • Command Line

Then I edited prism.js and added the following line at the end, as per the custom class plugin documentation:

Prism.plugins.customClass.prefix('prism-');

On my first code block, the little note icons disappeared. The coy theme remained, but there was no Java syntax highlighting.

My second code block had no formatting at all --- not even the coy theme.

The Chrome console says:

prism.js:126 Uncaught TypeError: Cannot read property 'token' of undefined
    at file:///…/prism.js:126:340
    at Array.map (native)
    at file:///…/prism.js:126:286
    at Object.run (file:///…/prism.js:2:4595)
    at Function.a.stringify (file:///…/prism.js:2:5163)
    at file:///…/prism.js:2:4843
    at Array.map (native)
    at Function.a.stringify (file:///…/prism.js:2:4818)
    at Object.highlight (file:///…/prism.js:2:3168)
    at Object.highlightElement (file:///…/prism.js:2:2930)
@LeaVerou
Copy link
Member

The first issue seems normal: Custom class names don't also rewrite the CSS files, you would need to do that manually based on your prefix.
About the second issue (TypeError), can you provide an online testcase that reproduces it?

@garretwilson
Copy link
Author

Custom class names don't also rewrite the CSS files, you would need to do that manually based on your prefix.

What do you mean exactly. What do I modify in the CSS files? I assume you mean I have to rename some classes to use prefixes. But how do I know all the style classes Prism uses? How do I know what to rename? Do I rename everything? Or just the .token.… selectors? What about .namespace? What about … all those other things (e.g. .command-line-prompt)?

@garretwilson
Copy link
Author

About the second issue (TypeError), can you provide an online testcase that reproduces it?

It would seem to me that anything reproduces it. Have you tried to reproduce this?

Here is a simple test case using the "coy" theme, all languages, and the following plugins:

  • Line Numbers
  • Custom Class
  • Keep Markup
  • Command Line

I then modified the prism.js file and added the following to the end:

Prism.plugins.customClass.prefix('prism-');

Here is the test case:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8" />
    <title>Prism Bug #1137 Demo with JAX-RS</title>
    <meta name="author" content="Garret Wilson" />
    <link type="text/css" rel="stylesheet" href="css/prism.css" />
</head>

<body>
    <pre class="line-numbers"><code class="language-java">@ApplicationPath("/foo/")
public class FooApplication extends Application {

  @Override
  public Set&lt;Class&lt;?&gt;&gt; getClasses() {
    return ImmutableSet.of(BarResourceService.class);  //implementation of BarResource
  }

}</code></pre>
<script src="../js/prism.js"></script>
</body>

</html>

Yes, I even replaced all .token. occurrences with .token.prism- in prism.css, but it doesn't matter --- this problem occurs even without including the CSS file. Here is what Chrome shows in the console:

prism.js:126 Uncaught TypeError: Cannot read property 'token' of undefined
    at file:///…/js/prism.js:126:340
    at Array.map (native)
    at file:///…/js/prism.js:126:286
    at Object.run (file:///…/js/prism.js:2:4595)
    at Function.a.stringify (file:///…/js/prism.js:2:5163)
    at file:///…/js/prism.js:2:4843
    at Array.map (native)
    at Function.a.stringify (file:///…/js/prism.js:2:4818)
    at Object.highlight (file:///…/js/prism.js:2:3168)
    at Object.highlightElement (file:///…/js/prism.js:2:2930)

@garretwilson
Copy link
Author

I've posted a bounty for someone to fix this:

https://www.bountysource.com/issues/45180945-custom-class-plugin-broken

@Golmote Golmote added the bug label Jun 23, 2017
jimmyhmiller pushed a commit to jimmyhmiller/prism that referenced this issue Jul 7, 2017
When the classMap is accessed, it is undefined, causing this look up to fail. Defaulting it to an empty object provides the right logic.
https://github.com/PrismJS/prism/blob/16ce4b336d625e13065bfc12ab6d13ac862d6f50/plugins/custom-class/prism-custom-class.js#L25
@jimmyhmiller
Copy link
Contributor

@garretwilson I've put in a PR for this. Let me know if it fixes it for you.

@garretwilson
Copy link
Author

@jimmyhmiller, sorry for the delay --- a few days of vacation with no good Internet connection, work, traveling, etc.

But I think your fix works!! I created my exact test case above and downloaded the latest published Prism code. I followed my own directions, and the error no longer occurs! Moreover I'm seeing that Prism is generating the prefix I asked for. As a test I renamed some of the selectors in the Prism CSS, and they styled the new classes.

This whole thing is less important to me now that I found out (see #1055 (comment)) that I can unselect token in my selectors, but I may still use this custom class feature in the future. In any case, I'm happy I could contribute to getting it fixed.

Thanks, @jimmyhmiller ! I'll go figure out how to assign the bounty now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants