@rakutentech/docsify-code-inline
A Docsify plugin that enables syntax highlighting for inline code.
Install
The plugin automatically loads itself, unless the data-no-autoload
attribute is set. It also automatically injects CSS in the DOM, unless the data-no-css-inject
attribute is set:
<!-- autoloads, injects CSS -->
<script
src="//unpkg.com/@rakutentech/docsify-code-inline/dist/index.min.js"
></script>
<!-- autoloads, doesn't inject CSS -->
<script
src="//unpkg.com/@rakutentech/docsify-code-inline/dist/index.min.js"
data-no-css-inject
></script>
<!-- doesn't load, doesn't inject CSS -->
<script
src="//unpkg.com/@rakutentech/docsify-code-inline/dist/index.min.js"
data-no-autoload
data-no-css-inject
></script>
You can also import it as an ES module, if using the .esm
build:
<script type="module" src="//unpkg.com/@rakutentech/docsify-code-inline/dist/index.esm.min.js"></script>
The module also supports Node. See the API below.
npm install --save-dev @rakutentech/docsify-code-inline
Usage
If you wrap `code` with square brackets and add a language identifier, e.g.
[`<link href="foo">` html], then the produced markup will enable syntax
highlighting using PrismJS like in code fences.
…gets transformed by this plugin into:
If you wrap `code` with square brackets and add a language identifier, e.g. <code class="language-html"><link href="foo"></code>, then the produced markup will
enable syntax highlighting using PrismJS like in code fences.
…which produces the following DOM tree when PrismJS is active and supports HTML:
<p>
If you wrap
<code>
code
</code>
with square brackets and add a language identifier, e.g.
<code class="language-html">
<span class="token tag">
<span class="token tag">
<span class="token punctuation">
<
</span>
link
</span>
<span class="token attr-name">
href
</span>
<span class="token attr-value">
<span class="token punctuation attr-equals">
=
</span>
<span class="token punctuation">
"
</span>
foo
<span class="token punctuation">
"
</span>
</span>
<span class="token punctuation">
>
</span>
</span>
</code>
, then the produced markup will enable syntax highlighting using PrismJS like in code fences.
</p>
Styling
The plugin uses the styles defined by docsify-themeable
.
Typescript
Types are included in the library.
API
Two things are exported:
-
const DEFAULT_CSS: string
, the CSS rules that are normally added to the DOM when the library is loaded in a browser anddata-no-css-inject
not used. -
function transform(markdown: string): string
, the method used by the plugin to replace inline code with syntax-highlighted spans in a markdown document.