@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">&lt;link href="foo"&gt;</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">
          &lt;
        </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">
        &gt;
      </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 and data-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.

License

MIT