Skip to content

Files

Latest commit

 

History

History
141 lines (111 loc) · 3.69 KB

language-highlight.md

File metadata and controls

141 lines (111 loc) · 3.69 KB

代码高亮

Prism

Docsify 使用 Prism 在代码块内进行语法高亮显示。 Prism 默认支持以下语言（也可提供额外的语言支持）：

  • Markup：HTML、XML、SVG、MathML、SSML、Atom、RSS
  • CSS
  • C-like
  • JavaScript

要启用语法高亮，请使用反标（```）创建一个标记符代码块，并在第一行指定一个 language（例如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;
}
```

上面的 markdown 将被渲染为：

<p>This is a paragraph</p>
<a href="//docsify.js.org/">Docsify</a>
p {
  color: red;
}
function add(a, b) {
  return a + b;
}

语言支持 :id=language-support

通过加载 Prism 语法文件，可支持其他语言：

!> 必须在 Docsify 之后加载 Prism 语法文件。

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

主题支持 :id=theme-support

Docsify 的官方主题与 Prism 语法高亮主题兼容。

!> Prism 主题必须在 Docsify 主题之后加载。

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

主题可在浅色和/或深色模式下使用

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

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

以下 Docsify 主题属性 默认覆盖 Prism 主题样式：

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

要使用 Prism 主题中指定的值，请将所需的主题属性设置为 unset：

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

动态内容

可以使用 Prism 的 highlightElement() 方法高亮显示动态生成的代码块：

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