markdown-it-prism-backticks

    1.3.0 • Public • Published

    markdown-it-prism-backticks

    MarkdownIt plugin for highlighting inline code snippets using Prism.

    Quickstart

    Installation

    Using npm:

    npm install markdown-it-prism-backticks
    

    Prism is a peer dependency of this plugin and must also be installed:

    npm install prismjs
    

    Usage

    Import it wherever you configure MarkdownIt and then use it as you would any other MarkdownIt plugin:

    import MarkdownIt from "markdown-it";
    import markdownItPrismBackticks from "markdown-it-prism-backticks";
    
    ...
    
    new MarkdownIt().use(markdownItPrismBackticks)

    Important! You may also need to import Prism itself. If you are using the markdown-it-prism plugin as well then you do not. If you are already importing Prism then you do not. If neither situation applies then you do need to import Prism:

    import "prismjs"; // Ensure the Prism global object is defined.
    import MarkdownIt from "markdown-it";
    import markdownItPrismBackticks from "markdown-it-prism-backticks";

    Now you can add a language annotation to any inline backticks content that you want highlighted by Prism:

    An example assembly instruction is `LDA #$22`{lang=asm6502}.

    The result is as expected:

    Example usage

    (The exact visual appearance will depend on the Prism theme that you are using.)

    The rules for the language annotation are simple:

    • No whitespace between the closing backtick and the opening curly brace.
    • No whitespace in the language annotation.

    See stevejay/middleengine-website for an example of a repository that uses this plugin.

    Usage with other MarkdownIt plugins

    This plugin can be used in conjunction with the markdown-it-prism plugin. The latter highlights fenced code blocks while this plugin highlights inline backtick content.

    This plugin plays well with the markdown-it-attrs plugin. Any content in curly braces that does not match the {lang=some-lang} format is ignored by this plugin, and you can add extra curly brace content for markdown-it-attrs after the language setting:

    This is fine: `LDA #$22`{.someClass}.
    
    This is also fine: `LDA #$22`{lang=asm6502}{.someClass}.

    Acknowledgements

    The basic approach to parsing inline backticks comes from the default parser in the MarkdownIt repository.

    The structure of this repository comes from the markdown-it-prism project.

    Install

    npm i markdown-it-prism-backticks

    DownloadsWeekly Downloads

    52

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    10.2 kB

    Total Files

    5

    Last publish

    Collaborators

    • middleengine