mirror of
https://github.com/docsifyjs/docsify.git
synced 2025-12-08 19:55:52 +00:00
64 lines
1.6 KiB
Markdown
64 lines
1.6 KiB
Markdown
# Language highlighting
|
|
|
|
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/prismjs@1/components/prism-bash.min.js"></script>
|
|
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js"></script>
|
|
```
|
|
|
|
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;
|
|
}
|
|
```
|
|
````
|
|
|
|
The above markdown will be rendered as:
|
|
|
|
```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;
|
|
}
|
|
```
|
|
|
|
## Highlighting Dynamic Content
|
|
Code blocks [dynamically created from javascript](https://docsify.js.org/#/configuration?id=executescript) can be highlighted using the method `Prism.highlightElement` like so:
|
|
|
|
```javascript
|
|
var code = document.createElement("code");
|
|
code.innerHTML = "console.log('Hello World!')";
|
|
code.setAttribute("class", "lang-javascript");
|
|
Prism.highlightElement(code);
|
|
```
|