@enpitsulin/gatsby-remark-shiki
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    gatsby-remark-shiki

    npm

    A plugin to syntax highlighting code blocks with gatsby-transform-remark for Gatsby that uses shiki

    Getting started

    Install the package

    npm install @enpitsulin/gatsby-remark-shiki
    // or use yarn
    yarn add @enpitsulin/gatsby-remark-shiki

    Add to your gatsby-config.js

    {
      // ...
      plugins:[
        resolve: `gatsby-transformer-remark`,
        options: {
          plugins: [
            `@enpitsulin/gatsby-remark-shiki`,
          ]
        }
      ]
    }
    // or
    {
      // ...
      plugins:[
        resolve: `gatsby-transformer-remark`,
        options: {
          plugins: [
            {
              resolve: `@enpitsulin/gatsby-remark-shiki`,
              options: {/* here for custom option */}
            }
          ]
        }
      ]
    }

    Then you can write code in your markdown file like this:

    ```javascript
    function funName() {
      console.log("this is a code snippet");
    }
    ```
    

    Options

    You can configure the plugin option to change theme or alias a language

    Multi Theme Support

    You can use built-in code highlight theme by change theme option, for example.

    {
      theme: "one-dark-pro"; //default 'nord';
    }

    You can preview some of these themes on https://vscodethemes.com/

    Theming with theme file

    To Do

    Theming with CSS variables

    First change theme option to css-variables,than create css which define these CSS variables file and require it in your gatsby-browser.js, e.g.

    /* shiki-variables */
    :root {
      --shiki-color-text: #eeeeee;
      --shiki-color-background: #333333;
      --shiki-token-constant: #660000;
      --shiki-token-string: #770000;
      --shiki-token-comment: #880000;
      --shiki-token-keyword: #990000;
      --shiki-token-parameter: #aa0000;
      --shiki-token-function: #bb0000;
      --shiki-token-string-expression: #cc0000;
      --shiki-token-punctuation: #dd0000;
      --shiki-token-link: #ee0000;
    }
    // gatsby-browser.js
    require("path/to/shiki-variables.css");

    Language Alias

    This lets you set up language aliases. For example, settings below will let you use the language superscript which will highlight using the javascript highlighter

    {
      aliases: {
        superscript: "javascript";
      }
    }

    Todo

    • [ ] Plugin Options
      • [x] Multi-theme support
      • [x] Use shiki theme css-variables to custom theme
    • [ ] Render LaTeX
    • [ ] Display line numbers
    • [ ] Diff highlighting
    • [x] Code copy
      • [ ] Code copy for options

    Contributing

    To do

    License

    MIT © enpitsuLin

    Install

    npm i @enpitsulin/gatsby-remark-shiki

    DownloadsWeekly Downloads

    16

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    17.7 kB

    Total Files

    26

    Last publish

    Collaborators

    • enpitsulin