Skip to content

Latest commit

 

History

History
63 lines (49 loc) · 1.6 KB

language-highlight.md

File metadata and controls

63 lines (49 loc) · 1.6 KB

Language highlighting

Docsify uses Prism 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 is available by loading the language-specific grammar files via CDN:

<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 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:

<p>This is a paragraph</p>
<a href="//docsify.js.org/">Docsify</a>
echo "hello"
function getAdder(int $x): int 
{
    return 123;
}

Highlighting Dynamic Content

Code blocks dynamically created from javascript can be highlighted using the method Prism.highlightElement like so:

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