`preload-js` for custom highlightjs/ace support
Nobody has claimed this yet.
- 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-jsfield tobook.toml - change load order and insert
preload-js
+ <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
+ 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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