|
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