|
1 |
| -# language highlight |
| 1 | +# Language highlighting |
2 | 2 |
|
3 |
| -**docsify** uses [Prism](https://github.com/PrismJS/prism) to highlight code blocks in your pages. By default it only supports CSS, JavaScript and HTML. You can make **Prism** load additional languages: |
| 3 | +Docsify uses [Prism](https://prismjs.com) to highlight code blocks in your pages. Prism supports the following languages by default: |
| 4 | + |
| 5 | +* Markup - `markup`, `html`, `xml`, `svg`, `mathml`, `ssml`, `atom`, `rss` |
| 6 | +* CSS - `css` |
| 7 | +* C-like - `clike` |
| 8 | +* JavaScript - `javascript`, `js` |
| 9 | + |
| 10 | +Support for [additional languages](https://prismjs.com/#supported-languages) is available by loading the language-specific [grammar files](https://cdn.jsdelivr.net/npm/prismjs@1/components/) via CDN: |
4 | 11 |
|
5 | 12 | ```html
|
6 |
| -<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script> |
7 |
| -<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-bash.min.js"></script> |
8 |
| -<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-php.min.js"></script> |
| 13 | +<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script> |
| 14 | +<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js"></script> |
9 | 15 | ```
|
10 | 16 |
|
11 |
| -To use the new languages, make sure the code block label matches the part after `prism-` in the file name. FOr example, for `prism-bash.js` write a code block labeled with `bash` like this: |
| 17 | +To enable syntax highlighting, wrap each code block in triple backticks with the [language](https://prismjs.com/#supported-languages) specified on the first line: |
12 | 18 |
|
13 | 19 | ````
|
| 20 | +```html |
| 21 | +<p>This is a paragraph</p> |
| 22 | +<a href="//docsify.js.org/">Docsify</a> |
| 23 | +``` |
| 24 | +
|
14 | 25 | ```bash
|
15 | 26 | echo "hello"
|
16 | 27 | ```
|
| 28 | +
|
| 29 | +```php |
| 30 | +function getAdder(int $x): int |
| 31 | +{ |
| 32 | + return 123; |
| 33 | +} |
| 34 | +``` |
17 | 35 | ````
|
18 | 36 |
|
19 |
| -?> Note that with GitHub-flavored markdown, `sh` and `bash` are effectively aliases of each other, but this is not the case with Prism. So using `sh` will not enable `bash` syntax in this case. |
| 37 | +The above markdown will be rendered as: |
20 | 38 |
|
21 |
| -For `prism-php.js`, it would be: |
| 39 | +```html |
| 40 | +<p>This is a paragraph</p> |
| 41 | +<a href="//docsify.js.org/">Docsify</a> |
| 42 | +``` |
| 43 | + |
| 44 | +```bash |
| 45 | +echo "hello" |
| 46 | +``` |
22 | 47 |
|
23 |
| -```` |
24 | 48 | ```php
|
25 | 49 | function getAdder(int $x): int
|
26 | 50 | {
|
27 | 51 | return 123;
|
28 | 52 | }
|
29 | 53 | ```
|
30 |
| -```` |
31 |
| - |
32 |
| -?> Check the [component files](https://github.com/PrismJS/prism/tree/gh-pages/components) list for more options. |
|
0 commit comments