Updateing hightlight.js with custom languages

[edvseppel]

I think the section in the User Guide howto update highlight.js is outdated. The default theme generates an hightlight.js and highlight.css in the root folder of the book directory. If I download a highlight.js package (https://highlightjs.org/download/) with custom selected formats the ZIP archive has the following structure:

• highlight.pack.js
• styles/xyz.css (100 different css files)

Uploading highlight.pack.js and *.css to a theme folder in mdbook does not work like described in the User Guide:

https://rust-lang.github.io/mdBook/format/theme/syntax-highlighting.html

[ZeWaka]

The guide worked fine for me. My file structure looks like this:

[ISSOtm]

This works for us with highlight.js in the theme/ directory. Perhaps the instructions in the User Guide could be made a bit more detailed, akin to what we have in our README.

Something worth noting is that it's not possible to load separate JS files (as typically found in the 3rd-party dist directories), since they are loaded after book.js, which performs the highlighting. I think the User Guide should mention that.

Note also, as our README mentions, that mdbook watch and mdbook serve do not watch for changes in the theme/ directory, requiring a different rebuild trigger. (touch -am doesn't work, apparently, so I save SUMMARY.md, which is slightly cumbersome.) If this is considered a problem, then a separate issue should be opened for that.

[ayoubelmhamdi]

From highlightjs.org/download, I specified only few languages, to download them

I got this zip

I have chosen highlight.min.js, by:

cp ~/Download/highlight.min.js ~/mybook/theme/highlight.js

├── book.toml
├── src
│   ├── chapter_1.md
│   └── SUMMARY.md
└── theme
    ├── highlight.css
    └── highlight.js

MISSING

highlight.css can't load from original highlightjs repo automatic

wget https://github.com/highlightjs/highlight.js/blob/84719c17a51d7bb045f2df441b9c00f871f7c063/src/styles/base16/github.css \
 -O ~/mybook/theme/highlight.css

but I can load it manually with some extension like stylus

OR

add to book.toml

[output.html]
additional-css = ["./theme/highlight.css"]

with some modification in theme/highlight.css

.hljs {
+  display: block;
+  overflow-x: auto;
   color: #adbac7;
-  background: #22272e;
}

[ISSOtm]

Strange, I do see highlight.js in theme/.

Are you perhaps using the "Ayu" theme? That uses a different stylesheet for some reason.