language-highlight.md

Language highlighting

Prism

Docsify uses Prism for syntax highlighting within code blocks. Prism supports the following languages by default (additional language support also available):

• Markup: HTML, XML, SVG, MathML, SSML, Atom, RSS
• CSS
• C-like
• JavaScript

To enable syntax highlighting, create a markdown codeblock using backticks (```) with a language specified on the first line (e.g., html, css, js):

```html
<p>This is a paragraph</p>
<a href="//docsify.js.org/">Docsify</a>
```

```css
p {
color: red;
}
```

```js
function add(a, b) {
return a + b;
}
```

The above markdown will be rendered as:

<p>This is a paragraph</p><ahref="//docsify.js.org/">Docsify</a>

p {
color: red;
}

functionadd(a,b){returna+b;}

Language support

Support for additional languages is available by loading the Prism grammar files:

[!IMPORTANT] Prism grammar files must be loaded after Docsify.

<scriptsrc="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script><scriptsrc="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-docker.min.js"></script><scriptsrc="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-git.min.js"></script><scriptsrc="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-java.min.js"></script><scriptsrc="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-jsx.min.js"></script><scriptsrc="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-markdown.min.js"></script><scriptsrc="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js"></script><scriptsrc="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-python.min.js"></script><scriptsrc="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-rust.min.js"></script><scriptsrc="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-sql.min.js"></script><scriptsrc="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-swift.min.js"></script><scriptsrc="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-typescript.min.js"></script><scriptsrc="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-yaml.min.js"></script>

Theme support

Docsify's official themes are compatible with Prism syntax highlighting themes.

[!IMPORTANT] Prism themes must be loaded after Docsify themes.

<!-- Light and dark mode --><linkrel="stylesheet"
href="//cdn.jsdelivr.net/npm/prism-themes@1/themes/prism-one-light.min.css"
/>

Themes can be applied in light and/or dark mode

<!-- Dark mode only --><linkrel="stylesheet"
media="(prefers-color-scheme: dark)"
href="//cdn.jsdelivr.net/npm/prism-themes@1/themes/prism-one-dark.min.css"
/><!-- Light mode only --><linkrel="stylesheet"
media="(prefers-color-scheme: light)"
href="//cdn.jsdelivr.net/npm/prism-themes@1/themes/prism-one-light.min.css"
/>

The following Docsify theme properties will override Prism theme styles by default:

--border-radius
--font-family-mono
--font-size-mono

To use the values specified in the Prism theme, set the desired theme property to unset:

<style>:root {
--border-radius: unset;
--font-family-mono: unset;
--font-size-mono: unset;
}
</style>

Dynamic content

Dynamically generated Code blocks can be highlighted using Prism's highlightElement() method:

constcode=document.createElement('code');code.innerHTML="console.log('Hello World!')";code.setAttribute('class','language-javascript');Prism.highlightElement(code);