Neoplastic Plasma Medusa

    @rakutentech/docsify-code-inline
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.5 • Public • Published

    npm size

    @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

    Install

    npm i @rakutentech/docsify-code-inline

    DownloadsWeekly Downloads

    61

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    17.7 kB

    Total Files

    13

    Last publish

    Collaborators

    • janis-ganga
    • jcayzac
    • boazy