Markdown

Markdown 相关

automd ---> 转换 md 中的标记

一个命令行工具，扫描目录中的所有 markdown 文件，将文件中属于 audomd 的标记，转为实际的 markdown 内容，从而更高效地编写文档

npx automd@latest

举个例子：

before.md

after.md

<!-- automd:badges color="yellow" license name="defu" codecov bundlephobia packagephobia -->
<!-- /automd -->

showdown ---> HTML/Markdown转换器

用JavaScript编写的双向Markdown到HTML到Markdown转换器

import showdown from 'showdown'

var converter = new showdown.Converter(),
    text      = '# hello, markdown!',
    html      = converter.makeHtml(text);

//=>  <h1 id="hellomarkdown">hello, markdown!</h1>

unified ---> markdown语法解析接口

通过语法树解析、检查、转换和序列化内容的接口

import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeDocument from 'rehype-document'
import rehypeFormat from 'rehype-format'
import rehypeStringify from 'rehype-stringify'
import {reporter} from 'vfile-reporter'

unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeDocument, {title: '👋🌍'})
  .use(rehypeFormat)
  .use(rehypeStringify)
  .process('# Hello world!')
  .then(
    (file) => {
      console.error(reporter(file))
      console.log(String(file))
    },
    (error) => {
      // Handle your error here!
      throw error
    }
  )

/*
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>👋🌍</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <h1>Hello world!</h1>
  </body>
</html>
 */

marked ---> 高效的Markdown解析器

import * as marked from 'marked'

console.log(marked.parse('### hello world'))

// <h2 id="hello-world">hello world</h2>

markdown-it ---> 经典markdown解析器

// 基本用法
var MarkdownIt = require('markdown-it'),
    md = new MarkdownIt();
var result = md.render('# markdown-it rulezz!');

// 丰富的插件机制
var md = require('markdown-it')()
  .use(plugin1)
  .use(plugin2, opts, ...)
  .use(plugin3);

gray-matter ---> 解析 frontmatter

transform:

---
title: Hello
slug: home
---
<h1>Hello world!</h1>

to:

{
  content: '<h1>Hello world!</h1>',
  data: { 
    title: 'Hello', 
    slug: 'home' 
  }
}

shiki ---> 语法高亮

import shiki from 'shiki'

shiki
  .getHighlighter({
    theme: 'nord'
  })
  .then(highlighter => {
    console.log(highlighter.codeToHtml(`console.log('shiki');`, { lang: 'js' }))
  })

// <pre class="shiki" style="background-color: #2e3440"><code>
//   <!-- Highlighted Code -->
// </code></pre>

Astro ---> 静态网站构建

选择的理由：

尽可能服务端渲染
网站速度快，内容关注与服务器优先的 MPA 架构
支持使用 React、Preact、Svelte、Vue、Solid、Lit 组件
丰富的可选择集成

---
import { storyblokApi } from "../cms";

const { data } = await storyblokApi.get('cdn/links');
const links = Object.values(data.links);
---
<h1>Using your CMS</h1>
<p>
  With top-level await, Astro makes it easy
  to fetch content from your CMS.
</p>
<ul>
  {links.map((link) => (
    <li><a href={link.slug}>{link.name}</a></li>
  ))}
</ul>

docz ---> MDX注入React组件

如果 React还使用了CSS 预处理器等，也有相应的配套插件

---
name: Button
route: /
---

import { Playground, Props } from 'docz'
import Button from './Button'

# Button

<Props of={Button} />

### Basic usage

<Playground>
  <Button type="submit">Click me</Button>
  <Button>No, click me</Button>
</Playground>

Markdown ​

automd ---> 转换 md 中的标记 ​

showdown ---> HTML/Markdown转换器 ​

unified ---> markdown语法解析接口 ​

marked ---> 高效的Markdown解析器 ​

markdown-it ---> 经典markdown解析器 ​

gray-matter ---> 解析 frontmatter ​

shiki ---> 语法高亮 ​

Astro ---> 静态网站构建 ​

docz ---> MDX注入React组件 ​