https://github.com/hojas/rich-markdown

🇲 功能丰富的 markdown 解析工具。
https://github.com/hojas/rich-markdown

markdown remark

Last synced: 28 days ago
JSON representation

🇲 功能丰富的 markdown 解析工具。

• Host: GitHub
• URL: https://github.com/hojas/rich-markdown
• Owner: hojas
• License: mit
• Created: 2023-11-23T10:07:28.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-23T12:11:58.000Z (about 1 year ago)
• Last Synced: 2024-04-08T16:32:25.699Z (9 months ago)
• Topics: markdown, remark
• Language: TypeScript
• Homepage:
• Size: 91.8 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# rich-markdown

功能丰富的 markdown 解析工具。

## 特色功能

- 元信息解析

- 代码高亮

- 视频播放

- 数学公式

- mermaid 流程图

## 在 Vue 3 中使用

创建 MarkdownViewer.vue 组件：

```html

  import { ref, watchEffect, onBeforeUnmount, onMounted } from 'vue'

  import { parseMarkdown, initCodeClipboard } from 'rich-markdown'

  

  // 根据环境自动切换暗黑模式和亮白模式

  import 'rich-markdown/dist/theme/default.css'

  

  // 暗黑模式

  // import 'rich-markdown/dist/theme/dark.css'

  

  // 亮白模式

  // import 'rich-markdown/dist/theme/light.css'

  const props = defineProps<{ content: string }>()

  const html = ref('')

  const codeClipboard = ref()

  watchEffect(async () => {

    const res = await parseMarkdown(props.content)

    html.value = res.html

  })

  onMounted(() => {

    // 初始化复制代码按钮

    codeClipboard.value = initCodeClipboard()

  })

  // 销毁复制代码 clipboard 对象

  onBeforeUnmount(() => codeClipboard.value?.destroy())

  


  .markdown-body {

    padding: 30px;

  }

```

使用组件：

```html

import { ref } from 'vue'

import MarkdownViewer from './components/MarkdownViewer.vue'

const content = ref('# hello')

  

```

## API

### parseMarkdown(value[, options])

转化 markdown 字符串为 html 字符串。

#### 参数

**value**: markdown 字符串

**options**: 配置项

- remarkPlugins: remark 插件列表， 默认值为 `[]`

- rehypePlugins: rehype 插件列表， 默认值为 `[]`

#### 返回值

返回一个 Promise 对象，包含以下属性：

- data: markdown 中的 matter 数据

- html: 转化后的 html 字符串

### initCodeClipboard()

初始化代码块复制按钮。

#### 返回值

返回 ClipboardJS 对象。Vue 中使用需在组件销毁前调用 destroy 方法：

```html

  import { onMounted, onBeforeUnmount } from 'vue'

  import { initCodeClipboard } from 'rich-markdown'

  const clipboard = ref()

  

  onMounted(() => {

    clipboard.value = initCodeClipboard()

  })

  onBeforeUnmount(() => {

    clipboard.value?.destroy()

  })

```

## 功能示例

### 1. 解析文档元信息

```text

---

version: 1.0

---

# Hello

```

parseMarkdown 解析后得到结果为：

```javascript

{

    data: { matter: { version: 1 } },

    html: '
Hello
',

}

```


### 2. 代码块高亮

> 使用 highlight.js 高亮代码。

``` python

@requires_authorization

def somefunc(param1='', param2=0):

    '''A docstring'''

    if param1 > param2: # interesting

        print 'Greater'

    return (param2 - param1 + 1) or None

class SomeClass:

    pass

>>> message = '''interpreter

... prompt'''

```

## 3. 视频

> 使用 video.js 播放视频。

用法：

````text

```video

https://download.samplelib.com/mp4/sample-30s.mp4

```

````

效果如下：

```video

https://download.samplelib.com/mp4/sample-30s.mp4

```

### 4. 数学公式

> 使用 Katex 解析公式。

用法：

```text

可以创建行内公式，例如 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$。或者块级公式：

$$

x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}

$$

```

效果如下：

可以创建行内公式，例如 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$。或者块级公式：

$$

x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}

$$

### 5. mermaid

使用 mermaid 渲染流程图：

````text

```mermaid

graph TD;

    A-->B;

    A-->C;

    B-->D;

    C-->D;

```

````

效果如下：

```mermaid

graph TD;

    A-->B;

    A-->C;

    B-->D;

    C-->D;

```