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

Overview

vite-plugin-md-to-html

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

Features

  • Markdown to HTML
  • Front Matter Extraction
  • Build-Time Syntax Highlighting for Codeblocks

Try it out on StackBlitz

Installation

npm install --save-dev vite-plugin-md-to-html

Setup and Usage

vite.config.js

// vite.config.js
import { defineConfig } from 'vite';
import { vitePluginMdToHTML } from 'vite-plugin-md-to-html';

export default defineConfig({
  plugins: [vitePluginMdToHTML()]
})

test.md

---
title: Hello from front-matter
---

# Markdown File

main.js

Markdown File

">
// main.js
import testHTML, { attributes } from "./test.md";

document.title = attributes.title; // Hello from front-matter
document.querySelector("#app").innerHTML = testHTML; // 

Markdown File

Options

Options type

export type PluginOptions = {
  markdownIt?: any; // markdown-it configurations
  syntaxHighlighting?: boolean; // true to enable syntax highlighting. default false.
  highlightJs?: {
    register?: Record<string, any>; // to register new language to syntax highlighting.
  };
};

Build-Time Syntax Highlighting!!

import { defineConfig } from 'vite';
import { vitePluginMdToHTML } from 'vite-plugin-md-to-html';

export default defineConfig({
  plugins: [
    vitePluginMdToHTML({
      syntaxHighlighting: true
    })
  ]
})

This will not include the CSS of syntax highlighting. You can-

Either import css from highlight.js npm package

import 'highlight.js/styles/github.css';

Or use it from CDN

">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css">

Check out https://highlightjs.org/usage/ for more details.

Type Declaration

; export default html; }">
// global.d.ts
declare module "*.md" {
  export const html: string;
  export const attributes: Record<string, any>;
  export default html;
}

Why New Plugin?

There are other plugins that you can use if you want to convert markdown to framework components.

vite-plugin-markdown in particular also supports turning markdown into HTML. However I was looking for a plugin where I can get markdown-to-html working without specifying any configurations and something that has better API, and comes with default configs.

I built this to make markdown integration easy with abell. however, the plugin itself is generic and not built for abell.

You might also like...

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

Dec 30, 2022

Adds Syntax Highlighting & Hint for TiddlyWiki5 tiddlers (text/vnd.tiddlywiki) to the CodeMirror.

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

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

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

Jan 3, 2022

Syntax highlighting, like GitHub

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

Dec 21, 2022

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

Demonstration of liquid effect on HTML Canvas using Matter.js and SVG Filters (Blur + Contrast)

Demonstration of liquid effect on HTML Canvas using Matter.js and SVG Filters (Blur + Contrast)

Canvas Liquid Effect Demonstration of liquid (or gooey) effect on HTML Canvas using Matter.js and SVG Filters (feGaussianBlur and feColorMatrix). DEMO

Dec 24, 2022

Convert a simple HTML syntax into tables compatible with Foundation for Emails.

Inky Inky is an HTML-based templating language that converts simple HTML into complex, responsive email-ready HTML. Designed for Foundation for Emails

Dec 22, 2022

Vite-plugin-web-extension - A vite plugin for generating cross browser platform, ES module based web extensions.

vite-plugin-web-extension A vite plugin for generating cross browser platform, ES module based web extensions. Features Manifest V2 & V3 Support Compl

Dec 31, 2022

convert markdown to html in under 5kb

convert markdown to html in under 5kb

convert markdown to HTML in under 5kb take a look at the to PHP translated version: https://github.com/SimonWaldherr/micromarkdown.php about License:

Dec 8, 2022

An NLP library for building bots, with entity extraction, sentiment analysis, automatic language identify, and so more

An NLP library for building bots, with entity extraction, sentiment analysis, automatic language identify, and so more

NLP.js If you're looking for the version 3 docs, you can find them here Version 3 "NLP.js" is a general natural language utility for nodejs. Currently

Dec 29, 2022

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

PDF data extraction for Physiotherapy Board NZ APC's

physioboard-apc-reader Parses and extracts info from NZ Physio board issued certificates Install npm install physioboard-apc-reader Use import { physi

Jan 13, 2022

A dependency-free image color extraction library

A dependency-free image color extraction library

Color mage A dependency-free image color extraction library. The extraction consists of using K-Means algorithm. It has a few utility functions as wel

Mar 11, 2022

A solution for highlights extraction for sports games by The Unknowns.

A solution for highlights extraction for sports games by The Unknowns.

Sportlight by The Unknowns Next.js, Express.js, NLTK, symbl.ai Inspiration - Problem Statement #3 by Experion Technologies Publishing highlights after

Apr 19, 2022

Generate smooth, consistent and always-sexy box-shadows, no matter the size, ideal for design token generation.

Generate smooth, consistent and always-sexy box-shadows, no matter the size, ideal for design token generation.

smooth-shadow Generate smooth, consistent and always-sexy box-shadows, no matter the size, ideal for design token generation. Demo As Tobias already p

Oct 15, 2022

Flight is a universal package manager for your needs, no matter what language you may want to write your code in.

Flight Swift, reliable, multi-language package manager. ⚡ Installation We don't have an official release of Flight yet, however, if you would like to

Dec 25, 2022

In this project, you will learn how to pull datas from supabase to google sheets in a matter of minute

In this project, you will learn how to pull datas from supabase to google sheets in a matter of minute

Supabase-Googlesheet In this repo, you will see how to pull datas from your supabase project using Supabase API to a Google Sheet. No matter how many

Jul 28, 2022

Vue 3 + Vite + SSR template based on Vite Plugin SSR and inspired by Vitesse

Vite Vue SSR Starter Vue 3 + Vite + SSR template based on Vite Plugin SSR and inspired by Vitesse Features ⚡️ Vue 3, Vite 2, TypeScript 🗂 Domain-Driv

Aug 2, 2022
Comments
  • feat: add initial implementation of md function

    feat: add initial implementation of md function

    In SSGs, you can now use EXPERIMENTAL_md function to do inlined markdown to html.

    Note

    For SSR users, you can also use this though it will run on runtime instead of build-time so you might not want to do it?? but yeah you can if you want. But maybe don't? unless you really want to..?? idk??

    E.g. in Abell you can do -

    {{
      import { EXPERIMENTAL_md as md } from 'vite-plugin-md-to-html';
    }}
    <div>
    {{
      md`
      # Hello There!!
      
      ~~~js
      const a = 3;
      ~~~
      `
    }}
    </div>
    

    It uses the configurations you set in vite.config.ts

    opened by saurabhdaware 0
  • fix: Image Resolution in SSR

    fix: Image Resolution in SSR

    This PR adds functionality which will add a fake import in client-side javascript when imageResolution is enabled on SSR.

    Vite then reads this fake import and treats it as legit import and moves the assets to dist on client-side.

    opened by saurabhdaware 0
Releases(v0.0.14)
  • v0.0.14(Sep 16, 2022)

    What's Changed

    fix: Image Resolution in SSR/SSG by @saurabhdaware in https://github.com/saurabhdaware/vite-plugin-md-to-html/pull/2

    The path resolution that was added in v0.0.11 now works in SSR and SSG 🎉

    The relative images that you add in markdown will be resolved and added to the bundle

     ![Something](./something.png)
    

    Check out the Image Resolution documentation to know how you can enable it

    Although this looks like a very small change, this essentially means you don't have to move your assets to public directory anymore and you can reference it from the relative paths which makes things a lot more maintainable in blogs.

    E.g.

    From thisTo this
    image image

    Check out my PR to my own blog to see it in action 💪🏼

    Full Changelog: https://github.com/saurabhdaware/vite-plugin-md-to-html/compare/v0.0.11...v0.0.14

    Source code(tar.gz)
    Source code(zip)
  • v0.0.11(Sep 4, 2022)

    What's Changed

    • feat: add image link resolutions by @saurabhdaware in https://github.com/saurabhdaware/vite-plugin-md-to-html/pull/1

    Checkout Image Path Resolutions Docs for more details

    Note

    This introduces image resolution only in CSR apps. Will be working on making this work on SSR in coming releases.

    Full Changelog: https://github.com/saurabhdaware/vite-plugin-md-to-html/commits/v0.0.11

    Source code(tar.gz)
    Source code(zip)
Owner
Saurabh Daware
Frontend @razorpay || Building @abelljs, a static site generator
Saurabh Daware
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'

null 2.1k Dec 29, 2022
Take your boring markdown document and add some columns to it

Take your boring markdown document and add some columns to it! With Multi Column Markdown rather than limiting your document layout to a single linear file you can now define blocks of data to be layed out horizontally next to each other. This additional functionality gives you the freedom to structure your notes in more creative ways.

Cameron Robinson 91 Jan 2, 2023
Web based, client side markdown editor with live previews

markdown.doctor (md) editor Web based, client side markdown editor with live previews I was looking for a nice markdown editor, and I couldn't find on

rasengan 4 Feb 24, 2022
WebNote is a simple, plain-text note-taking app for the web with Markdown support.

WebNote is a simple, plain-text note-taking app for the web with Markdown support. What you see is what you paste. No WYSIWIG, no formatting pasted from the web, and no features you don't need or want.

Ivan Kuznietsov 3 Feb 7, 2022
A collection of plug-ins that extend the Markdown-it parser

markdown-it-plugins A collection of plug-ins that extend the Markdown-it parser. Install npm i markdown-it-plugins -D Usage import MarkdownIt from 'ma

Chestnut 8 Mar 22, 2022
Eslint plugin which runs markdownlint

Eslint plugin which runs markdownlint

Paweł Drozd 7 Dec 27, 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
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
Opinionated syntax highlighting with shiki for markdown-it.

式神 shikigami Opinionated syntax highlighting with shiki for markdown-it. Installation Just use your favorite package manager. npm i @nrsk/shikigami Th

Vladislav Mamon 6 Sep 30, 2022