docusaurus-preset-shiki-twoslash
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.30 • Public • Published

    Docusaurus Preset Shiki Twoslash

    Sets up markdown code blocks to run through shiki which means it gets the VS Code quality syntax highlighting mixed with the twoslash JavaScript tooling from the TypeScript website.

    Setup

    1. Install the dependency: yarn add docusaurus-preset-shiki-twoslash

    2. Include "docusaurus-preset-shiki-twoslash" in the presets section of docusaurus.config.js

        presets: [
       [
         '@docusaurus/preset-classic',
         {
           // ...
         },
       ],
      + [
      +     'docusaurus-preset-shiki-twoslash',
      +     {
      +       themes: ["min-light", "nord"],
      +     },
      + ],
      ],
    3. Set up light/dark mode CSS in src/css/custom.css:

    [data-theme="light"] .shiki.nord {
       display: none;
    }
    
    [data-theme="dark"] .shiki.min-light {
       display: none;
    }
    1. Go read npmjs.com/package/remark-shiki-twoslash to see what is available, this package leaves all the heavy work to that module.

    Keywords

    none

    Install

    npm i docusaurus-preset-shiki-twoslash

    DownloadsWeekly Downloads

    520

    Version

    1.1.30

    License

    MIT

    Unpacked Size

    17 kB

    Total Files

    10

    Last publish

    Collaborators

    • orta
    • typescript-deploys
    • shiki-deploys