Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

crossnote

shd101wyy758NCSA0.9.14TypeScript support: included

A powerful markdown notebook tool

markdown

readme

Crossnote [WIP]

Also called as mume before.

npm npm npm

This library powers:

API Documentation: https://shd101wyy.github.io/crossnote/

Installation

# If you are using npm
$ npm install --save crossnote

# If you are using yarn
$ yarn add crossnote

Example

// CJS
const { Notebook } = require('crossnote');

// ESM
// import { Notebook } from "crossnote"

async function main() {
  const notebook = await Notebook.init({
    notebookPath: '/absolute/path/to/your/notebook',
    config: {
      previewTheme: 'github-light.css',
      mathRenderingOption: 'KaTeX',
      codeBlockTheme: 'github.css',
      printBackground: true,
      enableScriptExecution: true, // <= For running code chunks.

      chromePath: '/path/to/chrome', // <= For puppeteer export and open in browser locally.
      // Recommended to use the absolute path of Chrome executable.
    },
  });

  // Get the markdown engine for a specific note file in your notebook.
  const engine = notebook.getNoteMarkdownEngine('README.md');

  // open in browser
  await engine.openInBrowser({ runAllCodeChunks: true });

  // html export
  await engine.htmlExport({ offline: false, runAllCodeChunks: true });

  // chrome (puppeteer) export
  await engine.chromeExport({ fileType: 'pdf', runAllCodeChunks: true }); // fileType = 'pdf'|'png'|'jpeg'

  // prince export
  await engine.princeExport({ runAllCodeChunks: true });

  // ebook export
  await engine.eBookExport({ fileType: 'epub' }); // fileType = 'epub'|'pdf'|'mobi'|'html'

  // pandoc export
  await engine.pandocExport({ runAllCodeChunks: true });

  // markdown(gfm) export
  await engine.markdownExport({ runAllCodeChunks: true });

  return process.exit();
}

main();

Notebook Configuration

Visit here to see the documentation.

const config = {
  // File of extensions to be included in the notebook
  markdownFileExtensions: [".md", ".markdown", ".mdown", ".mkdn", ".mkd", ".rmd", ".qmd", ".mdx"],

  // The content to be included in HTML `<head>` tag.
  // This is useful for adding custom styles or scripts.
  includeInHeader: "",

  // Enable this option will render markdown by pandoc instead of markdown-it.
  usePandocParser: false,

  // In Markdown, a single newline character doesn't cause a line break in the generated HTML. In GitHub Flavored Markdown, that is not true. Enable this config option to insert line breaks in rendered HTML for single newlines in Markdown source.
  breakOnSingleNewLine: true,

  // Whether to enable preview zen mode.
  // Enable this option will hide unnecessary UI elements in preview unless your mouse is over it.
  enablePreviewZenMode: boolean;

  // Enable smartypants and other sweet transforms.
  enableTypographer: false,

  // Enable conversion of URL-like text to links in the markdown preview.
  enableLinkify: true,

  // Math
  mathRenderingOption: "KaTeX",  // "KaTeX" | "MathJax" | "None"
  mathInlineDelimiters: [["$", "$"], ["\\(", "\\)"]],
  mathBlockDelimiters: [["$$", "$$"], ["\\[", "\\]"]],
  mathRenderingOnLineService: "https://latex.codecogs.com/gif.latex", // "https://latex.codecogs.com/svg.latex", "https://latex.codecogs.com/png.latex"
  mathjaxV3ScriptSrc: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js',

  // Enable Wiki Link syntax support. More information can be found a  https://help.github.com/articles/adding-links-to-wikis/
  enableWikiLinkSyntax: true,
  // If checked, we use GitHub style piped wiki links, i.e. [[linkText|wikiLink]]. Otherwise, we use
  // [[wikiLink|linkText]] as the original Wikipedia style.
  useGitHubStylePipedLink: true

  // Enable emoji & font-awesome plugin. This only works for markdown-it parser, but not pandoc parser.
  enableEmojiSyntax: true

  // Enable extended table syntax to support merging table cells.
  enableExtendedTableSyntax: false

  // Enable CriticMarkup syntax. Only works with markdown-it parser.
  // Please check http://criticmarkup.com/users-guide.php for more information.
  enableCriticMarkupSyntax: false

  // Front matter rendering option
  frontMatterRenderingOption: 'none', // 'none' | 'table' | 'code block'

  // Mermaid theme
  mermaidTheme: 'default', // 'default' | 'dark' | 'forest'

  // Code Block theme
  // If `auto.css` is chosen, then the code block theme that best matches the current preview theme will be picked.
  codeBlockTheme: 'auto.css',
  //  "auto.css",
  //  "default.css",
  //  "atom-dark.css",
  //  "atom-light.css",
  //  "atom-material.css",
  //  "coy.css",
  //  "darcula.css",
  //  "dark.css",
  //  "funky.css",
  //  "github.css",
  //  "github-dark.css"
  //  "hopscotch.css",
  //  "monokai.css",
  //  "okaidia.css",
  //  "one-dark.css",
  //  "one-light.css",
  //  "pen-paper-coffee.css",
  //  "pojoaque.css",
  //  "solarized-dark.css",
  //  "solarized-light.css",
  //  "twilight.css",
  //  "vue.css",
  //  "vs.css",
  //  "xonokai.css"

  // Preview theme
  previewTheme: 'github-light.css',
  // "atom-dark.css",
  // "atom-light.css",
  // "atom-material.css",
  // "github-dark.css",
  // "github-light.css",
  // "gothic.css",
  // "medium.css",
  // "monokai.css",
  // "newsprint.css",
  // "night.css",
  // "none.css",
  // "one-dark.css",
  // "one-light.css",
  // "solarized-dark.css",
  // "solarized-light.css",
  // "vue.css"

  // Revealjs presentation theme
  revealjsTheme: "white.css",
  // "beige.css",
  // "black.css",
  // "blood.css",
  // "league.css",
  // "moon.css",
  // "night.css",
  // "serif.css",
  // "simple.css",
  // "sky.css",
  // "solarized.css",
  // "white.css",
  // "none.css"

  // Accepted protocols for links.
  protocolsWhiteList: "http://, https://, atom://, file://, mailto:, tel:",

  // When using Image Helper to copy images, by default images will be copied to root image folder path '/assets'
  imageFolderPath: '/assets',

  // Whether to print background for file export or not. If set to `false`, then `github-light` preview theme will b  used. You can also set `print_background` in front-matter for individual files.
  printBackground: false,

  // Chrome executable path, which is used for Puppeteer export. Leaving it empty means the path will be found automatically.
  chromePath: '',

  // ImageMagick command line path. Should be either `magick` or `convert`.
  // Leaving it empty we will use `sharp` instead.
  imageMagickPath: '',

  // Pandoc executable path
  pandocPath: 'pandoc',

  // Pandoc markdown flavor
  pandocMarkdownFlavor: "markdown-raw_tex+tex_math_single_backslash",

  // Pandoc arguments e.g. ['--smart', '--filter=/bin/exe']. Please use long argument names.
  pandocArguments: [],

  // Default latex engine for Pandoc export and latex code chunk.
  latexEngine: 'pdflatex',

  // Enables executing code chunks and importing javascript files.
  // This enables also the sidebar table of content.
  // ⚠ ️ Please use this feature with caution because it may put your security at risk!
  //    Your machine can get hacked if someone makes you open a markdown with malicious code while script execution is enabled.
  enableScriptExecution: false,

  // Enables transform audio video link to to html5 embed audio video tags.
  // Internally it enables markdown-it-html5-embed plugins.
  enableHTML5Embed: false,

  // Enables video/audio embed with ![]() syntax (default).
  HTML5EmbedUseImageSyntax: true,

  // Enables video/audio embed with []() syntax.
  HTML5EmbedUseLinkSyntax: false,

  // When true embed media with http:// schema in URLs. When false ignore and don't embed them.
  HTML5EmbedIsAllowedHttp: false,

  // HTML attributes to pass to audio tags.
  HTML5EmbedAudioAttributes: 'controls preload="metadata" width="320"',

  // HTML attributes to pass to video tags.
  HTML5EmbedVideoAttributes: 'controls preload="metadata" width="320" height="240"',

  // Puppeteer waits for a certain timeout in milliseconds before the document export.
  puppeteerWaitForTimeout: 0,

  // Args passed to puppeteer.launch({args: $puppeteerArgs})
  puppeteerArgs: [],

  // Render using PlantUML server instead of binary. Leave it empty to use the plantuml.jar file at `plantumlJarPath` (`java` is required in system path). Eg: "http://localhost:8080/svg/".
  // You run start a plantuml server by running:
  // $ docker run -d -p 8080:8080 plantuml/plantuml-server:jetty
  plantumlServer: "http://localhost:8080/svg/",

  // The absolute of the PlantUML jar file.
  // The plantuml.jar file could be downloaded from https://sourceforge.net/projects/plantuml/
  plantumlJarPath: "",

  // Example values:
  // - cdn.jsdelivr.net
  // - fastly.jsdelivr.net
  // - gcore.jsdelivr.net
  // - testingcf.jsdelivr.net
  jsdelivrCdnHost: "cdn.jsdelivr.net",

  // Kroki server url.
  krokiServer: "https://kroki.io",

  // Always show backlinks in the preview.
  alwaysShowBacklinksInPreview: false,
}

Notebook Local Configuration

If your notebook has .crossnote directory, then when you run await Notebook.init, it will automatically create several configuration files in .crossnote directory and load the configurations.

.crossnote
├── config.js
├── head.html
├── parser.js
└── style.less

Development

  1. Clone this project.
  2. Run yarn install from shell.
  3. Run yarn build:watch to start the watch mode.
  4. Run yarn build to build the project.

Or

If you already have nix and direnv installed, simply cd to the project directory, then run direnv allow once.

License

University of Illinois/NCSA Open Source License

changelog

Changelog

Please visit https://github.com/shd101wyy/vscode-markdown-preview-enhanced/releases for the more changelog

[Unreleased]

[0.9.14] - 2025-03-16

Bug fixes

  • Fixed the build for vscode-web caused by prismjs.

[0.9.13] - 2025-03-16

Bug fixes

  • Fixed a bug of bundling caused by importing the sharp package.

[0.9.12] - 2025-03-16

Changes

Updates

  • Updated mermaid version to the latest 11.5.0.
  • Updated katex version to the latest 0.16.21.
  • Updated prismjs version to the latest 1.30.0.
  • Updated bit-field version to the latest 1.9.0.

Bug fixes

  • Fixed the import the crossnote as nodejs esm module. crossnote#357
  • Fixed a bug of using enableExtendedTableSyntax. crossnote#369

[0.9.11] - 2024-11-08

Updates

  • Updated mermaid version to the latest 11.4.0.

[0.9.10] - 2024-09-07

Changes

  • Added .mdx to the default markdownFileExtensions.

Updates

  • Updated mermaid version to the latest 11.1.1.
  • Updated katex version to the latest v0.16.11.

Bug fixes

  • Fixed a scroll sync bug.

[0.9.9] - 2024-03-11

Bug fixes

Chore

[0.9.8] - 2024-03-10

New features

  • @moonlitusun sidebarToc supports local caching

Updates

  • @oneWaveAdrian updated the mermaid version to the latest 10.9.0.

Bug fixes

[0.9.7] - 2023-12-10

New features

  • Added enablePreviewZenMode option and reorganized the right-click context menu.

    image

Bug fixes

[0.9.6] - 2023-10-24

Changes

  • Updated mermaid.js to the latest version 10.6.0.

Bug fixes

[0.9.5] - 2023-10-23

Bug fixes

[0.9.4] - 2023-10-21

New features

Changes

  • Changed the markdown parser process to be like below. We removed the onWillTransformMarkdown and onDidTransformMarkdown hooks as these two caused the confusion.

    markdown
    ↓
    `onWillParseMarkdown(markdown)`
    ↓
    markdown
    ↓
    **crossnote markdown transformer**
    ↓
    markdown
    ↓
    **markdown-it or pandoc renderer**
    ↓
    html
    ↓
    `onDidParseMarkdown(html)`
    ↓
    html, and then rendered in the preview
  • (Beta) Supported to export the selected element in preview to .png file and copy the blob to the clipboard:

    image

Bug fixes

[0.9.3] - 2023-10-15

Bug fixes

  • Better handling of source map for importing files.

[0.9.2] - 2023-10-15

New features

  • Added ID button to copy the element id to clipboard:

    Screenshot from 2023-10-15 15-34-27

  • Supported to import section of markdown by header id:

    @import "test.md#header-id"
    
    or
    
    ![](test.md#header-id)
    
    or
    
    ![[test#header-id]]

Bug fixes

[0.9.1] - 2023-10-14

Buf fixes

  • Fixed rendering vega and vega-lite. Also fixed interactive=true attribute for vega.

[0.9.0] - 2023-10-13

New features

  • Added two more syntaxes to import files in addition to the @import syntax. Please note that these syntaxes only work on new lines. For example, they won't work within list items.
    • Use the image syntax but with other file extensions:
      ![](path/to/file.md)
      ![](path/to/test.py){.line-numbers}
      ![](path/to/test.js){code_block=true}
    • Use the wikilink syntax but with other file extensions:
      ![[file]]
      ![[path/to/test.py]]{.line-numbers}
      ![[path/to/test.js]]{code_block=true}

Bug fixes

[0.8.24] - 2023-10-10

Bug fixes

[0.8.23] - 2023-10-10

Bug fixes

  • Fixed exporting reveal.js presentation.

[0.8.22] - 2023-10-10

Bug fixes

[0.8.21] - 2023-10-09

Bug fixes

[0.8.20] - 2023-10-09

New features

Bug fixes

[0.8.19] - 2023-10-06

Changes

  • Deprecated the processWikiLink in parser.js. Now crossnote handles how we process the wiki link.
    We also added two more options:
    • wikiLinkTargetFileExtension: The file extension of the target file. Default is md. For example:
      • [[test]] will be transformed to [test](test.md)
      • [[test.md]] will be transformed to [test](test.md)
      • [[test.pdf]] will be transformed to [test](test.pdf) because it has a file extension.
    • wikiLinkTargetFileNameChangeCase: How we transform the file name. Default is none so we won't change the file name.
      A list of available options can be found at: https://shd101wyy.github.io/crossnote/interfaces/NotebookConfig.html#wikiLinkTargetFileNameChangeCase

Bug fixes

  • Reverted the markdown transformer and deleted the logic of inserting anchor elements as it's causing a lot of problems.
    The in-preview editor is not working as expected. So we now hide its highlight lines and elements feature if the markdown file failed to generate the correct source map.

[0.8.18] - 2023-10-05

New features

  • Updated the katex version to 0.16.9.

Improvements

  • Added end-of-document class name to the element of the last line of the preview.
  • Exported the KatexOptions and MermaidConfig interfaces.

[0.8.17] - 2023-10-04

New features

  • 📝 Supported in-preview editor that allows you to edit the markdown file directly in the preview 🎉.
    This feature is currently in beta.
    When the editor is open, you can press ctrl+s or cmd+s to save the markdown file. You can also press esc to close the editor.
  • Deprecated the VS Code setting markdown-preview-enhanced.singlePreview.
    Now replaced by markdown-preview-enhanced.previewMode:
    • Single Preview (default)
      Only one preview will be shown for all editors.
    • Multiple Previews
      Multiple previews will be shown. Each editor has its own preview.
    • Previews Only 🆕
      No editor will be shown. Only previews will be shown. You can use the in-preview editor to edit the markdown.
  • Supported to set attribute to image and link, e.g.:

    ![](path/to/image.png){width=100 height=100}
  • Improved the markdown transformer to better insert anchors for scroll sync and highlight lines and elements.
    Added more tests for the markdown transformer to make sure it works as expected.

  • Added the reading time estimation in the preview footer ⏲️.
  • Added Edit Markdown menu item to the context menu of the preview, which offers two options:
    • Open VS Code Editor Open the markdown file in VS Code editor.
    • Open In-preview Editor Open the markdown file in the in-preview editor.
  • Updated the mermaid version to the latest 10.5.0
  • Added the API website: https://shd101wyy.github.io/crossnote/

Bug fixes

[0.8.16] - 2023-09-24

New features

  • Added head.html config file to allow you to include custom HTML in the <head> of the preview. This could be useful for adding custom CSS or JavaScript to the preview.

Bug fixes

[0.8.15] - 2023-09-17

New features

  • Added the includeInHeader option, which allows you to include custom HTML in the <head> of the preview. This could be useful for adding custom CSS or JavaScript to the preview.

Bug fixes

[0.8.14] - 2023-09-15

New features

Bug fixes

  • Fixed the vue.css theme bug that caused the missing scroll bar in the preview. Also fixed a context menu bug for selecting the vue.css theme.

[0.8.13] - 2023-09-15

Bug fixes

[0.8.12] - 2023-09-15