Skip to content

Commit

Permalink
Merge pull request #1263 from docsifyjs/fix-docs-language-highlight
Browse files Browse the repository at this point in the history
Update language-highlight.md
  • Loading branch information
jhildenbiddle authored Jul 3, 2020
2 parents 76050e3 + cd9df2d commit 366500f
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 12 deletions.
1 change: 1 addition & 0 deletions docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-bash.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-markdown.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-nginx.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-php.min.js"></script>
<script>
((window.gitter = {}).chat = {}).options = {
room: 'docsifyjs/Lobby'
Expand Down
45 changes: 33 additions & 12 deletions docs/language-highlight.md
Original file line number Diff line number Diff line change
@@ -1,32 +1,53 @@
# language highlight
# Language highlighting

**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:
Docsify uses [Prism](https://prismjs.com) to highlight code blocks in your pages. Prism supports the following languages by default:

* Markup - `markup`, `html`, `xml`, `svg`, `mathml`, `ssml`, `atom`, `rss`
* CSS - `css`
* C-like - `clike`
* JavaScript - `javascript`, `js`

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:

```html
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-bash.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-php.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js"></script>
```

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:
To enable syntax highlighting, wrap each code block in triple backticks with the [language](https://prismjs.com/#supported-languages) specified on the first line:

````
```html
<p>This is a paragraph</p>
<a href="//docsify.js.org/">Docsify</a>
```
```bash
echo "hello"
```
```php
function getAdder(int $x): int
{
return 123;
}
```
````

?> 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.
The above markdown will be rendered as:

For `prism-php.js`, it would be:
```html
<p>This is a paragraph</p>
<a href="//docsify.js.org/">Docsify</a>
```

```bash
echo "hello"
```

````
```php
function getAdder(int $x): int
{
return 123;
}
```
````

?> Check the [component files](https://github.com/PrismJS/prism/tree/gh-pages/components) list for more options.

0 comments on commit 366500f

Please sign in to comment.