Skip to content

Commit 366500f

Browse files
Merge pull request #1263 from docsifyjs/fix-docs-language-highlight
Update language-highlight.md
2 parents 76050e3 + cd9df2d commit 366500f

File tree

2 files changed

+34
-12
lines changed

2 files changed

+34
-12
lines changed

docs/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@
9898
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-bash.min.js"></script>
9999
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-markdown.min.js"></script>
100100
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-nginx.min.js"></script>
101+
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-php.min.js"></script>
101102
<script>
102103
((window.gitter = {}).chat = {}).options = {
103104
room: 'docsifyjs/Lobby'

docs/language-highlight.md

+33-12
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,53 @@
1-
# language highlight
1+
# Language highlighting
22

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:
411

512
```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>
915
```
1016

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:
1218

1319
````
20+
```html
21+
<p>This is a paragraph</p>
22+
<a href="//docsify.js.org/">Docsify</a>
23+
```
24+
1425
```bash
1526
echo "hello"
1627
```
28+
29+
```php
30+
function getAdder(int $x): int
31+
{
32+
return 123;
33+
}
34+
```
1735
````
1836

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:
2038

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+
```
2247

23-
````
2448
```php
2549
function getAdder(int $x): int
2650
{
2751
return 123;
2852
}
2953
```
30-
````
31-
32-
?> Check the [component files](https://github.com/PrismJS/prism/tree/gh-pages/components) list for more options.

0 commit comments

Comments
 (0)