-
-
Notifications
You must be signed in to change notification settings - Fork 5.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1263 from docsifyjs/fix-docs-language-highlight
Update language-highlight.md
- Loading branch information
Showing
2 changed files
with
34 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |