Line highlight plugin

[lorensr]

Nice package! I'm wondering whether it would be possible to use this plugin?

http://prismjs.com/plugins/line-highlight/

It would involve adding to the markdown parser to translate eg:

```javascript{1,4-7}
[ten lines of code]
```

to:

<pre data-line="1,4-7"><code class="language-javascript">[ten lines of code]</code></pre>

[claudio-silva]

I see.
I thought a bit about this and the best way to implement it.
I came to the conclusion that the best way to avoid having to implement specific features for each Prism plugin that requires them, would be to create a generic mechanism that allows one to apply custom CSS classes and HTML attributes to specific PRE elements, as that seems to be the way to configure most plugins.
I'll see what I can do :-)

[lorensr]

Awesome! 💃 Looking forward ☺️

…

On Sat, Apr 7, 2018 at 2:56 PM Cláudio Silva ***@***.***> wrote: I see. I thought a bit about this and the best way to implement it. I came to the conclusion that the best way to avoid having to implement specific features for each Prism plugin that requires them, would be to create a generic mechanism that allows one to apply custom CSS classes and HTML attributes to specific PRE elements, as that seems to be the way to configure most plugins. I'll see what I can do :-) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAPVmO7DCi4MM4j7eabc2PCu67w46AH9ks5tmQvqgaJpZM4TKjvw> .

[claudio-silva]

@lorensr I've released a new version of the plugin.
Please re-read the documentation (Readme).
I would appreciate your feedback.

[lorensr]

Readme looks good! Here's what line-highlight looks like for me.

{
  "plugins": ["prism-ext", "-highlight"],
  "pluginsConfig": {
    "prism": {
      "codeBlockExtSyntax": true,
      "plugins": ["line-highlight"]
    }
  }
}

```{data-line="2,4-5"}
a = 3
a.foo()
b = () => 'hi'
b
a + b
console.log('what')
```

[claudio-silva]

Thanks, that's the feedback I needed.
On my books, the plugin works just fine, but I'm using the prism-base16-tomorrow.light theme and an additional custom stylesheet.

Have you read this section of the Readme? There I explain how to make the line-highlight plugin work correctly and its current limitations.

Tip: you should set the lineHeight config option. You may also have to create some custom CSS styles.

Here's how I see the plugin working on my book:

The line numbers column from the line-numbers plugin is placed (via CSS) above the line numbers generated by the line-highlight plugin, so it hides them.
As for the CSS being applied, the font-family is Menlo, font size is 11.9px and line-height is 17.85px. The <pre> has position:relative and <code> has display:block.
I configured "lineHeight": 17 on book.json.

Anyway, as I said on the Readme, "unfortunately, all of this only works if the user doesn't increase or decrease the text size when reading the book. This is a limitation of the line-highlight plugin that cannot be overcome" as it works in pixels only (not on em or other relative units).

A complete solution would require the original plugin to be forked and patched, or using another plugin, or applying the current plugin on the client-side (the browser) when the book is being viewed; but then, it would no longer work on PDFs.

[lorensr]

Thanks! Should I be adding to the styles to styles/pdf.css, styles/ebook.css, and styles/website.css?

Also, are these warnings okay?

info: 9 plugins are installed 
info: 6 explicitly listed 
info: loading plugin "prism-ext"... OK 
info: loading plugin "search"... OK 
info: loading plugin "lunr"... OK 
info: loading plugin "sharing"... OK 
info: loading plugin "fontsettings"... OK 
info: loading plugin "theme-default"... OK 
info: found 14 pages 
info: found 23 asset files 
info: loading Prism plugin "prism-line-highlight.min.js"...
warn: Can't load Prism plugin "prismjs/plugins/line-highlight/prism-line-highlight.min.js"; window.addEventListener is not a function
info: loading Prism plugin "prism-line-numbers.min.js"...
warn: Can't load Prism plugin "prismjs/plugins/line-numbers/prism-line-numbers.min.js"; window.addEventListener is not a function
info: highlighting 14 pages took 0.3 seconds
info: >> generation finished with success in 32.1s ! 
info: >> 1 file(s) generated 

[claudio-silva]

The styles I mentioned are just an example. You can set your custom styles by loading your own stylesheet using the custom-js-css plugin, or even use the plugins option to load a stylesheet, as explained on the Readme.

As for the warning messages, no, they are not okay and probably that's what's causing the plugin to malfunction. I don't see those messages on my build.
Let me see if I can replicate the issue on my side...

[...]

Ok, I ran gitbook install and re-tested this plugin and now I'm also getting those error messages (they didn't appear before; that's odd}.
I've fixed the errors but now I'm getting highlighted lines with zero height.
I'm investigating this issue and I'll get back to you when I find a fix for it.

[lorensr]

I haven't done any gitbook dev, but window.addEventListener is not a function suggests to me that prism is expecting to run in a browser environment, and whatever environment it's actually being run in doesn't have window.addEventListener()?

[claudio-silva]

Sorry for the long delay. I was very busy.
The problem I've experienced after solving the addEventListener one was caused by an interference between the line-highlight plugin and the line-numbers plugin, when using both at the same time.
It should all be working now.
If you experience any further problems I'll reopen this issue.

[lorensr]

Now I'm getting a lot of the tokenizePlaceholders errors.

$  gitbook install
info: installing 1 plugins using [email protected]
info:
info: installing plugin "prism-ext"
info: install plugin "prism-ext" (*) from NPM with version 3.1.1
info: >> plugin "prism-ext" installed with success

$ gitbook pdf ./ ./out/test.pdf
...
warn: Failed to highlight:
warn: TypeError: Cannot read property 'tokenizePlaceholders' of undefined
    at /Users/me/Dropbox/Documents/guide/book/node_modules/gitbook-plugin-prism-ext/node_modules/prismjs/components/prism-php.js:121:40
    at Object.run (/Users/me/Dropbox/Documents/guide/book/node_modules/gitbook-plugin-prism-ext/node_modules/prismjs/prism.js:456:5)
    at Object.highlight (/Users/me/Dropbox/Documents/guide/book/node_modules/gitbook-plugin-prism-ext/node_modules/prismjs/prism.js:287:11)
    at Object.highlightElement (/Users/me/Dropbox/Documents/guide/book/node_modules/gitbook-plugin-prism-ext/node_modules/prismjs/prism.js:266:28)
    at highlight (/Users/me/Dropbox/Documents/guide/book/node_modules/gitbook-plugin-prism-ext/index.js:346:11)
    at /Users/me/Dropbox/Documents/guide/book/node_modules/gitbook-plugin-prism-ext/index.js:267:9
    at NodeList.forEach (/Users/me/Dropbox/Documents/guide/book/node_modules/jsdom/lib/jsdom/living/node-list.js:67:16)
    at Object.page (/Users/me/Dropbox/Documents/guide/book/node_modules/gitbook-plugin-prism-ext/index.js:236:16)
    at /Users/me/.gitbook/versions/3.2.3/lib/output/callHook.js:48:29
    at /Users/me/.gitbook/versions/3.2.3/lib/utils/promise.js:22:20

[claudio-silva]

Hi @lorensr
The problem was caused by a new version of Prismjs that was recently released.
This plugin is compatible with Prism v1.13.0, but not with 1.14.0.
I've released a new version of the plugin that locks the version number to 1.13.0.
I've tested it and it is working,
Supporting 1.14 seems to be non-trivial, so I won't be supporting it for now.
I will await your feedback.

[claudio-silva]

Closing this as no feedback was given, so I guess this is solved.

[lorensr]

Sorry I missed your comment—I re-ran gitbook install and no longer get the error, thank you! Is this what it should look like without styles?

Also, I'm trying to add style with the below, but there's no visual change.

[claudio-silva]

Hi @lorensr
I know it has been difficult to see this plugin working, but the truth is that I've been using it on a book of mine with no problems.
So I decided to investigate what was going on and I discovered that, out-of-the-box, the prism-ext plugin will not work as expected, due to the default CSS styles of GitBook books.
Some custom styles are needed to make it work correctly and I had those styles included on my book, so the plugin always worked fine for me.
To make it possible for you (and other people too) to see this plugin working properly ;-) I created a demonstration GitBook book that provides the bare minimum required to make it work.

Take a look at this repository: gitbook-prism-ext-demo
I've also updated the plugin to make it possible for one to view the demo properly.

[lorensr]

Thanks! The demo looks good in the browser. Do you have any suggestions on how I can get it looking good in pdf/ebook formats? For instance:

gitbook pdf ./ test.pdf

[claudio-silva]

Sorry for the long delay. I forgot about this as we're not using this plugin any more.
If you did manage to develop a stylesheet that works, you may consider sharing it with the community. It would be welcome. I would gladly accept a pull request.