• Stars
    star
    112
  • Rank 312,240 (Top 7 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 4 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Vite Plugin for MDX

====================== WE ARE LOOKING FOR A NEW MAINTAINER ====================

Vite Plugin MDX

Use this Vite plugin to use MDX v1 with your Vite v2 app. For Vite v3+ we recommend migrating to MDX v2 using the official @mdx-js/rollup, this comment explains how to implement it.

Features:

  • Works with React and Preact.
  • Works with Vue [WIP].
  • HMR support.
  • SSR support.
  • Plugin support, such as remark-frontmatter.

Getting Started

  1. Install:

    1. Vite Plugin:
       npm install vite-plugin-mdx
    2. MDX v1:
      npm install @mdx-js/mdx
    3. MDX React:
      npm install @mdx-js/react
      Or MDX Preact:
      npm install @mdx-js/preact
  2. Add the plugin to your vite.config.js.

    // vite.config.js
    
    import mdx from 'vite-plugin-mdx'
    
    // `options` are passed to `@mdx-js/mdx`
    const options = {
      // See https://mdxjs.com/advanced/plugins
      remarkPlugins: [
        // E.g. `remark-frontmatter`
      ],
      rehypePlugins: [],
    }
    
    export default {
      plugins: [mdx(options)]
    }
  3. You can now write .mdx files.

    // hello.mdx
    
    import { Counter } from './Counter.jsx'
    
    # Hello
    
    This text is written in Markdown.
    
    MDX allows Rich React components to be used directly in Markdown: <Counter/>
    
    // Counter.jsx
    
    import React, { useState } from 'react'
    
    export { Counter }
    
    function Counter() {
      const [count, setCount] = useState(0)
    
      return (
        <button onClick={() => setCount((count) => count + 1)}>
          Counter: {count}
        </button>
      )
    }

Examples

File-specific options

To define options a per-file basis, you can pass a function to the mdx plugin factory.

mdx((filename) => {
  // Any options passed to `mdx` can be returned.
  return {
    remarkPlugins: [
      // Enable a plugin based on the current file.
      /\/components\//.test(filename) && someRemarkPlugin,
    ]
  }
})

Pre-built transclusion

To embed an .mdx or .md file into another, you can import it without naming its export. The file extension is required. Remark plugins are applied to the imported file before it's embedded.

import '../foo/bar.mdx'

More Repositories

1

awesome-react-components

Curated List of React Components & Libraries.
37,355
star
2

awesome-angular-components

Catalog of Angular 2+ Components & Libraries
3,236
star
3

telefunc

Remote Functions. Instead of API.
TypeScript
649
star
4

awesome-redux

Catalog of Redux Libraries & Learning Material
374
star
5

wildcard-api

Functions as API.
JavaScript
367
star
6

awesome-universal-rendering

Awesome resources about server side sendering (SSR), static rendering, pre-rendering, static site generators (SSG).
339
star
7

react-streaming

React 18 Streaming. Full-fledged & Easy.
TypeScript
106
star
8

goldpage

Page Builder.
JavaScript
57
star
9

awesome-web-apps

Curated List of Web Apps
56
star
10

timer-tab

Source code of Timer Tab
JavaScript
48
star
11

forge-sha256

SHA-256 implementation extracted from digitalbazaar/forge
JavaScript
44
star
12

clocktab

Source code of Clock Tab.
JavaScript
34
star
13

gulp-jspm

gulp plugin to build assets loaded with jspm/SystemJS
JavaScript
34
star
14

awesome-frontend-libraries

Catalog of Frontend UI Libraires
34
star
15

awesome-vue-refactor

A curated list of awesome things related to Vue.js
33
star
16

vike

Build Your Own Framework.
TypeScript
31
star
17

json-serializer

Same as JSON but with added support for Date, undefined, NaN, Infinity, RegExp and more.
JavaScript
25
star
18

parcel-ssr

SSR tool. Tiny yet powerful. Based on Parcel.
JavaScript
15
star
19

extendable-error-class

Extend the Error Class with ES2015/ES5/Babel, i.e. fix for `class MyError extends Error{}`
JavaScript
14
star
20

test-javascript-hash-implementations

Javascript hash implementations tested for speed. Including SHA-256, MD5, CRC32, SHA3, BLAKE2S
JavaScript
12
star
21

proto-db

JavaScript Object as Database.
JavaScript
11
star
22

vite-plugin-server-entry

Handles the server entry.
TypeScript
8
star
23

promise-serial

Run promises in series
JavaScript
8
star
24

vike-with-vercel

JavaScript
8
star
25

docpress

TypeScript
8
star
26

vite-plugin-ssr_windi-css

Example of using vite-plugin-ssr with Windi CSS
JavaScript
7
star
27

build-worker

Build your Cloudflare Workers with esbuild.
JavaScript
7
star
28

vite-to-vike

Add SSR/SSG to an existing Vite app.
JavaScript
7
star
29

reprop

A JavaScript library to manage the logics of views
JavaScript
6
star
30

vps-deno

Example of using vite-plugin-ssr with Deno
JavaScript
6
star
31

vite-plugin-ssr_tailwind-css

JavaScript
6
star
32

html

Generate HTML documents.
JavaScript
6
star
33

FasterWeb

Proposal to reduce loading time of library code on the web
5
star
34

libraries

Curated list of library lists
5
star
35

research

5
star
36

fetch

WHATWG Fetch for the browser and Node.js
JavaScript
5
star
37

esm-cjs-interop-playground

JavaScript
4
star
38

vite-plugin-ssr_react-europe_talk

vite-plugin-ssr talk
JavaScript
4
star
39

timerlog

A small utility to measure and log time
JavaScript
4
star
40

stem

TypeScript
4
star
41

vite-plugin-ssr_vercel_build-output-api

JavaScript
4
star
42

vike-with-svelte

JavaScript
4
star
43

import

TypeScript
3
star
44

vite-plugin-ssr-vuetify

JavaScript
3
star
45

url-props

Fully-featured URL parsing, for Node.js & Browser.
JavaScript
3
star
46

vike-react-router

JavaScript
3
star
47

vps_prerender-worker

JavaScript
3
star
48

vike-with-solid-ssr

TypeScript
3
star
49

stem-react

React renderer for vite-plugin-ssr
TypeScript
3
star
50

part-regex

Create a RegExp by defining some parts with strings and other parts with RegExp.
TypeScript
3
star
51

website-dependency-tree

Retrieve the Dependency Tree of a Website
JavaScript
3
star
52

vite-framework

Example of a framework built on top of Vite + vite-plugin-ssr
TypeScript
3
star
53

vike-with-redux

JavaScript
3
star
54

test-e2e

TypeScript
2
star
55

cloudflare-workers-react-18-streaming

Example of using React 18 SSR Streaming on Cloudflare Workers
JavaScript
2
star
56

vike-with-redux_minimal-example

JavaScript
2
star
57

eject

TypeScript
2
star
58

vite-plugin-ssr_vue-router

JavaScript
2
star
59

goldpage-react-express-starter

🚀 Starter to create a full-stack app: Interactive Frontend (React) + SSR (Goldpage) + Server (Node.js, Express).
JavaScript
2
star
60

vite-3-react-18-ssr-streaming

JavaScript
2
star
61

libframe

TypeScript
2
star
62

libassert

Tiny zero-dependency tool for library authors to create assertion functions with clean strack traces.
TypeScript
2
star
63

wildcard-intercept

Library to intercept Wildcard API calls.
JavaScript
2
star
64

tab-utils

Utilities for Clock Tab and Timer Tab
TypeScript
2
star
65

set-text-dimensions

set block of text dimension to a given width and height
JavaScript
2
star
66

vps-mui

TypeScript
2
star
67

vike-preact-server-routing

JavaScript
2
star
68

vike-with-solid-spa

TypeScript
2
star
69

find

Find a file among your project files.
JavaScript
2
star
70

get-parent-dirname

Get the path of the directory of the parent module.
JavaScript
2
star
71

clean-sentence

Clean a sentence from missing first letter upper case, trailing dot and/or remove URLs, emojis, white space doublets.
JavaScript
2
star
72

vite-config-json

TypeScript
2
star
73

free-emailing

Free emailing including custom domain and programmatic API
2
star
74

mdocs

Utility to create documentation for programming libraries with markdown.
JavaScript
2
star
75

vite-plugin-ssr_vercel-2022-02

JavaScript
2
star
76

trace-logs

Trace console.logS in Node.js to know from which file they come from
JavaScript
2
star
77

npm-download-count

Retrieve package's number of downloads in a period of time
JavaScript
2
star
78

vps-framework

JavaScript
2
star
79

nuxt-telefunc

TypeScript
1
star
80

pnpm-vue-demo

1
star
81

restack

TypeScript
1
star
82

require-shim

JavaScript
1
star
83

mini-assert

a mini(malistic) assertion library for both the Browser and Node.js
JavaScript
1
star
84

get-user-dir

For libraries to get the directory of the user's code
JavaScript
1
star
85

framework-builder

TypeScript
1
star
86

telefunc-vercel

JavaScript
1
star
87

submodule-init

TypeScript
1
star
88

vite-webpack

TypeScript
1
star
89

vite-pr-12030-reprod

CSS
1
star
90

release-me

Publish your npm packages.
TypeScript
1
star
91

vps-mdi

TypeScript
1
star
92

jspm-plugin-audio

JSPM Audio Plugin
JavaScript
1
star
93

vite-swc

JavaScript
1
star
94

vike-with-urql

TypeScript
1
star
95

vike-react-simple

JavaScript
1
star
96

github-action-matrix-with-js

JavaScript
1
star
97

vps-babel-bug

JavaScript
1
star
98

vps_import.meta.hot

JavaScript
1
star
99

vps-reprod-308

TypeScript
1
star
100

node-mini-log

mini(malistic) logs
JavaScript
1
star