rust-lang / rust-lang/mdBook

`preload-js` for custom highlightjs/ace support

Open
#3,216 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

C-enhancement
Dominant language
Rust
Stars
22.2k
Forks
1.9k
PR merge metrics
PR metrics pending

Description

Problem

This is a part of #3124.

Now there is no way to override highlightjs/ace language without theme override.
About custom highlightjs, some issues had been opened previously (ex. #2505, #657, #1459),
but this issue aims for a complete resolution of both highlightjs and ace.

If this issue is resolved, user can easily add custom language playground by the way of #3124.

Proposed Solution
  • add preload-js field to book.toml
  • change load order and insert preload-js

https://github.com/rust-lang/mdBook/blob/a57975d499a660fd11da05a9010e93fe245525ba/crates/mdbook-html/front-end/templates/index.hbs#L309

+        <script src="{{ resource "highlight.js" }}"></script>
         {{#if playground_js}}
         <script src="{{ resource "ace.js" }}"></script>
         <script src="{{ resource "mode-rust.js" }}"></script>
+        {{/if}}
+
+        {{#each preload_js}}
+        <script src="{{ resource this }}"></script>
+        {{/each}}
+
+        {{#if playground_js}}
         <script src="{{ resource "editor.js" }}"></script>
         <script src="{{ resource "theme-dawn.js" }}"></script>
         <script src="{{ resource "theme-tomorrow_night.js" }}"></script>
@@
         <script src="{{ resource "clipboard.min.js" }}"></script>
-        <script src="{{ resource "highlight.js" }}"></script>
         <script src="{{ resource "book.js" }}"></script>
  • change ace mode by language

https://github.com/rust-lang/mdBook/blob/a57975d499a660fd11da05a9010e93fe245525ba/crates/mdbook-html/front-end/playground_editor/editor.js#L8

+    function playground_mode(editable) {
+        const cls = Array.from(editable.classList)
+            .find(c => c.startsWith("language-"));
+        return cls ? "ace/mode/" + cls.slice("language-".length)
+                   : "ace/mode/rust";
+    }
+
     Array.from(document.querySelectorAll('.editable')).forEach(function(editable) {
@@
-        editor.getSession().setMode("ace/mode/rust");
+        editor.getSession().setMode(playground_mode(editable));

By this change, user can specify custom language syntax like below, and they are effective because they are load after highlight.js, ace.js and before book.js.

[output.html]
preload-js = ["hljs-example.js", "mode-example.js"]
Notes

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with crates/mdbook-html/front-end/templates/index.hbs and crates/mdbook-html/front-end/playground_editor/editor.js, then trace how [output.html] settings from book.toml reach the template. Add preload-js handling so custom scripts load after highlight.js and Ace assets but before book.js, and use each editable element’s language class for the Ace mode. Verify both custom Highlight.js/Ace scripts and the existing playground behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
handlebars, javascript, rust
Domain
frontend, tooling
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.