mirror of
https://github.com/docsifyjs/docsify.git
synced 2025-12-08 19:55:52 +00:00
7bbf13d9bd
* chore: add missing Vue support for Vercel builds * refactor: move some functions and module-level state into classes as private methods and properties to start to encapsulate Docsify Also some small tweaks: - move initGlobalAPI out of Docsify.js to start to encapsulate Docsify - move ajax to utils folder - fix some type definitions and improve content in some JSDoc comments - use concise class field syntax - consolidate duplicate docsify-ignore comment removal code This handles a task in [Simplify and modernize Docsify](https://github.com/docsifyjs/docsify/issues/2104), as well as works towards [Encapsulating Docsify](https://github.com/docsifyjs/docsify/issues/2135). * chore: add prettier code format check to our lint script, and add a prettier script for manually formatting the whole code base * chore: update issue/pr templates * chore: apply our format to the whole code base --------- Co-authored-by: Koy <koy@ko8e24.top> Co-authored-by: i544693 <369491420@qq.com>
67 lines
1.7 KiB
Markdown
67 lines
1.7 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>
|
|
```
|
|
|
|
!> This `<script>` tag must be placed after the docisfy `<script>` to work.
|
|
|
|
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
|
|
const code = document.createElement('code');
|
|
code.innerHTML = "console.log('Hello World!')";
|
|
code.setAttribute('class', 'lang-javascript');
|
|
Prism.highlightElement(code);
|
|
```
|