markdown解析高亮及mermaid

原文：markdown解析高亮及mermaid

我平时用typora写记录，完稿后再上传到网站上，typora支持需要许多的第三方markdown扩展语法，写起来很方便，但是我网站使用的python解析库—— markdown，将markdown文本转为html，它并不支持第三方语法，我比较烦心高亮和mermaid语法的支持，所以花了一点时间给 markdown库写了两个插件，分别用来解析这两种语法。

自定义解析扩展markdown语法

解析，其实就是将目标文本替换成特定的其他文本，比如html标签，自定义的markdown库的插件，可以选择在它解析前后进行自定义解析，处理原理是一样的，不同的是，在markdow它解析前，你处理的对象是普通的markdow文本，而解析后处理的是htnl文本。

这里，我选择用正则表达式来实现具体的解析操作，高亮的语法是两个==包裹的文本内容，比如需要将其查找出来，并将其内容替换到mark标签内。

import markdown
import re
class HighlightExtension(markdown.Extension):
    def extendMarkdown(self, md: Markdown):
       """
       :param md: Markdown实例
       :return: list
       """
        md.registerExtension(self)
        md.preprocessors.register(HighlightPreprocessor(), 'highlight_preprocessor', 5)


class HighlightPreprocessor(markdown.preprocessors.Preprocessor):
    def run(self, lines: list) -> list:
       """
       执行函数
       :param lines: 文本列表
       :return: list
       """
        text = '\n'.join(lines)
        # 正则模式字符串
        pattern = r'==(.+?)=='
        # 替换匹配结果
        highlighted_text = re.sub(pattern, r'<mark>\1</mark>', text)
        return highlighted_text.splitlines()
      
# 测试
def md2html(text):
    """
    :param text: str
    :return: str
    """
    html = markdown.markdown(text, extensions=[
        HighlightExtension()# 引入自定义的插件
    ])
    return html
  
  

现在，就能正常解析高亮文本了，比如：这是高亮内容。

解析mermaid代码

Mermaid是一个基于Javascript的图表绘制工具，它能解析类似markd的语法，然后生成图像，让你像以写文章一样的方式的绘制图表，非常顺滑。

markdown 到mermaid的过程中，除了将mermaid的代码块解析为特定的标签，还需在html文档中引入mermaid的依赖文件，

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

然后添加一个js标签，待文档加载完成后渲染。

<script defer>
    mermaid.initialize({ startOnLoad: true });
</script>

import markdown
import re

# 继承Extension类
class MermaidExtension(markdown.Extension):
    def extendMarkdown(self, md: Markdown):
       """
       :param md: Markdown 实例
       :return: 
       """
        # 注册插件
        md.registerExtension(self)
        # 注册解析前处理器
        md.preprocessors.register(MermaidPreprocessor(), 'mermaid_preprocessor', 1000)
        # 注册解析后处理器
        # md.postprocessors.register(MermaidPostprocessor(), 'mermaid_postprocessor', 25)

# 解析前处理器
class MermaidPreprocessor(markdown.preprocessors.Preprocessor):
   def run(self, lines: list) -> list:
       """
       执行函数
       :param lines: 文本列表
       :return: list
       """
        text = '\n'.join(lines)
        post_text = re.sub(pattern, r'<div class="mermaid">\1</div>', text, flags=re.S)
        # 分解行
        return post_text.splitlines()

# 解析后处理器
class MermaidPostprocessor(markdown.postprocessors.Postprocessor):
   def run(self, text: str) -> str:
       """
       执行函数
       :param text: 文本
       :return: 
       """
       pattern = r"<code>mermaid(.+?)</code>"
       post_text = re.sub(pattern, r'<div class="mermaid">\1</div>', text, flags=re.S )
       return post_text



# 测试
def md2html(text):
    """
    :param text: str
    :return: str
    """
    html = markdown.markdown(text, extensions=[
        MermaidExtension(),# 引入自定义的插件
    ])
    return html

你看，现在就能直接在markdown中绘图了，amazing！

这是一个表示饼图的语法：

pie title 水果
    "香蕉" : 386
    "苹果" : 85
    "橘子" : 15

渲染之后如下：

流程图：

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

类图：

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      +bool is_wild
      +run()
    }

状态图：

stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

ER图：

erDiagram
    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER ||--o{ INVOICE : "liable for"
    DELIVERY-ADDRESS ||--o{ ORDER : receives
    INVOICE ||--|{ ORDER : covers
    ORDER ||--|{ ORDER-ITEM : includes
    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
    PRODUCT ||--o{ ORDER-ITEM : "ordered in"

甘特图：

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

旅程图：

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me

Git关系图：

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit

思维导图：

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectivness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectivness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

更多图表语法，可以前往该网站查看Online FlowChart & Diagrams Editor - Mermaid Live Editor。