diff options
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 39 |
1 files changed, 12 insertions, 27 deletions
@@ -26,9 +26,6 @@ The final layout this guide produces, relative to your document root: │ ├── docsify.min.js │ ├── search.min.js │ ├── docsify-copy-code.min.js - │ ├── prism-core.min.js - │ ├── prism-clike.min.js - │ ├── prism-javascript.min.js │ ├── prism-bash.min.js │ ├── prism-yaml.min.js │ ├── prism-python.min.js @@ -80,24 +77,18 @@ Replace `vue.css` in the command above with any of the following if preferred; s ### Syntax Highlighting (Prism) -Download the Prism highlighting engine and its language components. The core engine -ships **no languages on its own**, so each language is a separate file. Note that -`prism-clike.min.js` is the base grammar that `prism-javascript.min.js` extends, so it -must be downloaded and loaded **before** javascript (see Step 3). +Docsify **bundles Prism** and highlights a handful of languages out of the box — +`markup`/HTML, `css`, `clike`, and `javascript`. For any other language, download its +Prism component and load it **after** `docsify.min.js` (see Step 3) so it attaches to +Docsify's bundled Prism. -```bash -# Prism core engine (no languages on its own) -curl -L "https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-core.min.js" \ - -o assets/js/prism-core.min.js - -# clike — base grammar required by javascript -curl -L "https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-clike.min.js" \ - -o assets/js/prism-clike.min.js +> **Do not download `prism-core.min.js`.** A standalone Prism core loaded after Docsify +> replaces Docsify's own Prism on the page; the language components then attach to the +> wrong instance and silently fail to highlight. You only need the language files below. -# Language components -curl -L "https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-javascript.min.js" \ - -o assets/js/prism-javascript.min.js +This guide adds bash, yaml, python, and r: +```bash curl -L "https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js" \ -o assets/js/prism-bash.min.js @@ -113,8 +104,8 @@ curl -L "https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-r.min.js" \ To highlight more languages, download additional `prism-<lang>.min.js` files (browse the [Prism components](https://cdn.jsdelivr.net/npm/prismjs@1/components/)) and add a matching -`<script>` tag in Step 3. Some languages extend others — anything built on `clike` (e.g. -javascript) must load after `prism-clike.min.js`. +`<script>` tag in Step 3. A few Prism languages depend on others — if one does, download +its dependency too (Docsify already provides `clike`, the most common base grammar). ### Copy-to-Clipboard Button @@ -174,10 +165,7 @@ Create `index.html`: <script src="assets/js/search.min.js"></script> <script src="assets/js/docsify-copy-code.min.js"></script> - <!-- Prism: core engine first, then clike (required by javascript), then languages --> - <script src="assets/js/prism-core.min.js"></script> - <script src="assets/js/prism-clike.min.js"></script> - <script src="assets/js/prism-javascript.min.js"></script> + <!-- Extra Prism languages — Docsify bundles Prism core + html/css/js. Load after docsify. --> <script src="assets/js/prism-bash.min.js"></script> <script src="assets/js/prism-yaml.min.js"></script> <script src="assets/js/prism-python.min.js"></script> @@ -285,9 +273,6 @@ Expected output: ./assets/js/docsify-copy-code.min.js ./assets/js/docsify.min.js ./assets/js/prism-bash.min.js -./assets/js/prism-clike.min.js -./assets/js/prism-core.min.js -./assets/js/prism-javascript.min.js ./assets/js/prism-python.min.js ./assets/js/prism-r.min.js ./assets/js/prism-yaml.min.js |