Opinionated syntax highlighting with shiki for markdown-it.

Overview

式神 shikigami

Build/Test Coverage NPM Semantic Release

Opinionated syntax highlighting with shiki for markdown-it.

Installation

Just use your favorite package manager.

npm i @nrsk/shikigami

This package comes both in CommonJS and ESM flavors. No additional steps required, just import or require it.

Usage with other plugins

Yet to be confirmed, but most likely this plugin is incompatible with other plugins that process fenced code blocks (e.g. markdown-it-attrs, which can be used to assign classes to elements and has similar syntax).

Usage

This package exposes a function named shikigami, which is a Promise, that resolves to a markdown-it plugin function. Hence, you must await it (or use .then syntax), and only then pass the resulting function to markdown-it.

Why? shiki uses a lot of asynchrounous stuff under the hood, and its public API is mostly asynchronous as well, while markdown-it is synchronous, so yeah, I had to wrap the plugin in a Promise.

Below is an example of usage.

import { shikigami, loadTheme } from '@nrsk/shikigami'
import md from 'markdown-it'

async function processMarkdown(input) {
  const parser = md('commonmark').use(
    await shikigami({
      withLanguage: true,
      withLineNumbers: true,
      highlightInvert: true,
      highlighter: {
        // All other shiki's highlighter options are available as well,
        // so you can load additional languages and so on.
        theme: await loadTheme('./theme/custom.json')
      }
    })
  )

  return parser.render(input)
}

Markdown syntax

This plugin introduces a simple syntax extension for fenced code blocks, that allows you to change plugin options in-place. Options defined this way have precedence over plugin options.

# Example

```typescript {{ 
interface User {
  id: number
  firstName: string
  lastName: string
  role: string
}
```

Options

List of options that can be passed to shikigami function. Options allowed to be used directly in Markdown through syntax extension are marked accordingly.

openToken?: string

  • Default: {{
  • Allowed in Markdown: no

Use this option to change the opening token for extended Markdown syntax.

closeToken?: string

  • Default: {{
  • Allowed in Markdown: no

Use this option to change the closing token for extended Markdown syntax.

withLanguage?: boolean

  • Default: false
  • Allowed in Markdown: yes

Set to true to allow rendering a sibling

with a language- class. This is useful when you want to show the language specified in your fenced code block.

withLineNumbers?: boolean

  • Default: false
  • Allowed in Markdown: yes

Set to true to render line numbers.

highlight?: Array >

  • Default: []
  • Allowed in Markdown: yes

Use this option to specify which lines or ranges of lines should be marked with specified highlighting class (or classes). These classes can be customized via highlightClasses and highlightRangeClasses options.

Examples

  • Highlight lines 5 and 7:

    {{ highlight: [5, 7] }}
    
  • Highlight lines 5, 7, and lines in range from 10 to 15:

    {{ highlight: [5, 7, [10, 15]] }}
    

highlightClasses?: Array

  • Default: ['highlight']
  • Allowed in Markdown: no

Use this option to customize classes for highlighted lines.

highlightRangeClasses?: HighlightRangeClasses

  • Default: ['highlight-start', 'highlight-inner', 'highlight-end']
  • Allowed in Markdown: no

Use this option to customize classes for highlighted ranges. Must be a tuple of exactly three elements.

Explanation

  • The first class is assigned to the first line of a range.
  • The second class is assigned to all lines between the first and the last line of a range. This only applied if the range covers 3 and more lines.
  • The third class is assigned to the last line of a range.

Is this overkill? Probably...

highlightInvert?: boolean

  • Default: false
  • Allowed in Markdown: yes

Set to true to allow marking lines that are not highlighted with specified classes. These classes can be customised via highlightInvertClasses.

Note: this will work only if highlight option is set to a non-empty array of lines.

highlightInvertClasses?: Array

  • Default: ['highlight-invert']
  • Allowed in Markdown: no

Use this option to customize classes for unhighlighted lines.

highlighter?: HighlighterOptions

  • Default: {}
  • Allowed in Markdown: no

Highlighter options which will be passed right into shiki's getHighlighter. See shiki documentation for available options.

API

Besides exposing the shikigami function, this plugin re-exports shiki's loadTheme just for convenience.

shikigami(userOptions?: ShikigamiOptions): Promise

Plugin fabric.

import { shikigami } from '@nrsk/shikigami'
import anchor from 'markdown-it-anchor'
import md from 'markdown-it'

async function processMarkdown(input) {
  return md('commonmark')
    .use(
      await shikigami({
        /** Plugin options. */
      })
    )
    .use(anchor)
    .render(input)
}

loadTheme(themePath: string): Promise

Shiki's theme loader.

Todo

  • Tests.
  • Diffs support.
  • Plugin for remark.
  • Plugin for rehype.

License

MIT.

You might also like...

Syntax Highlighter supporting multiple languages, themes, fonts, highlighting from a URL, local file or post text.

Syntax Highlighter supporting multiple languages, themes, fonts, highlighting from a URL, local file or post text.

Crayon Syntax Highlighter Supports multiple languages, themes, fonts, highlighting from a URL, local file or post text. Written in PHP and jQuery. Cra

Nov 26, 2022

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

May 18, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

Jan 3, 2023

Markdoc is a Markdown-based syntax and toolchain for creating custom documentation sites and experiences.

Markdoc is a Markdown-based syntax and toolchain for creating custom documentation sites and experiences.

A powerful, flexible, Markdown-based authoring framework. Markdoc is a Markdown-based syntax and toolchain for creating custom documentation sites and

Jan 2, 2023

A Bower wrapper for @bartaz modification to the jQuery Term Highlighting plugin.

jQuery.Highlight.js Text highlighting plugin for jQuery. Original code and documentation. Install API Examples Attribution Install How to use this plu

Dec 30, 2022

Highlighting the best apps and builders on the Farcaster community.

Highlighting the best apps and builders on the Farcaster community.

FarApps Highlighting the best apps and builders on the Farcaster community. Getting Started This project uses Next.js. Install dependencies and run th

Dec 30, 2022

A lib for text highlighting by using Canvas.

canvas-highlighter 基于 canvas 实现的文本划词高亮,与文本展示的结构完全解耦,不改变文本内容的 DOM 结构。 Installation npm install canvas-highlighter Usage 最简单的实现文本划词直接高亮 import CanvasHig

Dec 24, 2022

Markdown Plus is a markdown editor with extra features

Markdown Plus is a markdown editor with extra features

Markdown Plus Markdown Plus ("M+" or "mdp" for short) is a markdown editor with extra features. Online demo: mdp.tylingsoft.com Apps We currently don'

Dec 29, 2022

A plugin for the Obsidian markdown note application, adding functionality to render markdown documents with multiple columns of text.

A plugin for the Obsidian markdown note application, adding functionality to render markdown documents with multiple columns of text.

Multi-Column Markdown Take your boring markdown document and add some columns to it! With Multi Column Markdown rather than limiting your document lay

Jan 2, 2023

A markdown-it plugin that process images through the eleventy-img plugin. Can be used in any projects that uses markdown-it.

markdown-it-eleventy-img A markdown-it plugin that process images through the eleventy-img plugin. Can be used in any projects that use markdown-it. F

Dec 20, 2022

An obsidian plugin for uploading local images embedded in markdown to remote store and export markdown for publishing to static site.

An obsidian plugin for uploading local images embedded in markdown to remote store and export markdown for publishing to static site.

Obsidian Publish This plugin cloud upload all local images embedded in markdown to specified remote image store (support imgur only, currently) and ex

Dec 13, 2022

Markdown Transformer. Transform markdown files to different formats

Mdtx Inspired by generative programming and weed :). So I was learning Elm language at home usually in the evening and now I am missing all this gener

Jan 2, 2023

The official, opinionated, batteries-included toolset for efficient Redux development

Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development (Formerly known as "Redux Starter Kit") Installati

Jan 8, 2023

🤠 An opinionated AJAX client for Ruby on Rails APIs

Rails Ranger Exploring the routes and paths of Ruby on Rails APIs Github Repository | Documentation Rails Ranger is a thin layer on top of Axios, whic

Nov 22, 2022

Prettier is an opinionated code formatter.

Prettier is an opinionated code formatter.

Opinionated Code Formatter JavaScript · TypeScript · Flow · JSX · JSON CSS · SCSS · Less HTML · Vue · Angular GraphQL · Markdown · YAML Your favorite

Dec 30, 2022

:book: Opinionated CSS styleguide for scalable applications

css Opinionated CSS styleguide for scalable applications This guide was heavily inspired by experiments, awesome people like @fat and @necolas and awe

Nov 30, 2022

Highly opinionated project template for Serverless Framework that follows and applies hexagonal architecture principle to serverless world. Prepared with easy testing in mind.

Highly opinionated project template for Serverless Framework that follows and applies hexagonal architecture principle to serverless world. Prepared with easy testing in mind.

serverless-hexagonal-template Highly opinionated project template for Serverless Framework that applies hexagonal architecture principles to the serve

Dec 26, 2022
Comments
  • build: migrate to `tsup` and `tsx`

    build: migrate to `tsup` and `tsx`

    General improvements and simplification of the setup.

    • Replaces custom build workflow based on rollup with tsup.
    • Replaces tsm loader with tsx.
    • Simplifies npm scripts and
    • Fixes a "bug" when package-lock.json wouldn't get updated along with the package.json during release workflow.

    Closes #3

    feat refactor tooling released 
    opened by norskeld 2
  • The automated release is failing 🚨

    The automated release is failing 🚨

    :rotating_light: The automated release from the master branch failed. :rotating_light:

    I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

    You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

    Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

    Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

    If you are not sure how to resolve this, here are some links that can help you:

    If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.


    No npm token specified.

    An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

    Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.


    Good luck with your project ✨

    Your semantic-release bot :package::rocket:

    semantic-release 
    opened by github-actions[bot] 0
Releases(v1.1.5)
Owner
Vladislav Mamon
TypeScript devotee. Rust tyro. Functional programming admirer. Front-end shepherd.
Vladislav Mamon
JavaScript syntax highlighter with language auto-detection and zero dependencies.

Highlight.js Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It can work with pretty muc

highlight.js 20.8k Jan 5, 2023
Syntax implementation of Laravel's's Blade language for highlight.js

Blade language definition for Highlight.js Syntax implementation of Laravel's's Blade language for highlight.js. Support us We invest a lot of resourc

Spatie 12 Jul 6, 2022
A refined tool for exploring open-source projects on GitHub with a file tree, rich Markdown and image previews, multi-pane multi-tab layouts and first-class support for Ink syntax highlighting.

Ink codebase browser, "Kin" ?? The Ink codebase browser is a tool to explore open-source code on GitHub, especially my side projects written in the In

Linus Lee 20 Oct 30, 2022
Vite plugin to convert markdown to html with front-matter extraction and build-time syntax highlighting

Vite plugin to convert markdown to html with front-matter extraction and build-time syntax highlighting

Saurabh Daware 9 Sep 18, 2022
Render (GitHub Flavoured with syntax highlighting) Markdown, and generate CSS for each of GitHub’s themes.

render-gfm Render (GitHub Flavoured with syntax highlighting) Markdown, and generate CSS for each of GitHub’s themes. GitHub Repository npm Package Do

Shaun Bharat 12 Oct 10, 2022
Lightweight, robust, elegant syntax highlighting.

Prism Prism is a lightweight, robust, and elegant syntax highlighting library. It's a spin-off project from Dabblet. You can learn more on prismjs.com

Prism.js 10.9k Dec 30, 2022
Adds Syntax Highlighting & Hint for TiddlyWiki5 tiddlers (text/vnd.tiddlywiki) to the CodeMirror.

CodeMirror-Mode-TiddlyWiki5 Adds Syntax Highlighting for TiddlyWiki5 tiddlers (text/vnd.tiddlywiki) to the CodeMirror, along with some other useful ed

Ke Wang 18 Dec 30, 2022
lightweight (~5kb) code editor custom element with syntax highlighting

code-edit lightweight (~5kb) code editor custom element with syntax highlighting ?? Install · ?? Example · ?? API docs · ?? Releases · ???? Contribute

stagas 5 Apr 14, 2022
React component library for displaying code samples with syntax highlighting!!

react-code-samples usage example: import {} from 'react-code-samples'; import 'highlight.js/styles/default.css'; // or use another highlight js style

Pranav Teegavarapu 8 Jan 3, 2022
Syntax highlighting, like GitHub

Close up of The Starry Night by Vincent van Gogh (1889) with examples of starry-night over it starry-night Syntax highlighting, like what GitHub uses

Titus 585 Dec 21, 2022