博客踩坑记录

Typora 相关配置

Markdown 编辑器有很多，如常常用于写笔记的 Obsidian。但最终我选用了鉴于 Typora，因为他更轻量一点。

Markdown 相关内容请看本站文章 Markdown、Tex和Mermaid。

在菜单的文件 - 偏好设置中进行设置。我开启的设置有

• 数学公式渲染
• mermaid 渲染
• 图像复制在./asstes文件夹

此外，我倾向于开启用Tab做缩进符，建议开启。

你还可以通过下面这个选项，在右键菜单添加创建 md 文件的快捷项：

自定义命令行导出文件

在偏好设置 - 导出中，你还可以自定义命令行命令，来自定义操作

我在自己的博客仓库中编写了manage.py来处理文件，所以可以调用：

python "path-to-my-site\manage.py" add --config "path-to-my-site\manage.yaml" -i "${currentPath}"

这里的${currentPath}是一个占位符，表示当前单个文件的路径。

注意这个占位符要用引号包括"${currentPath}"，或者如果文件路径带空格，命令行命令会有问题。

Marked.js + MathJax + Mermaid 前端渲染

我采用单页面网站，每次后端拉取 md 文件渲染。

Markdown 渲染实在是最大的一个坑，尤其是和 MathJax 一起。

mathjax 渲染

1. 不渲染

• 先 marked 渲染导致公式内部有问题

  解决方法：先把公式保护起来，渲染 md 后再放回去渲染 tex 公式

  const MathProtector = {
      blockMath: [],
      inlineMath: [],
  
      protect(md) {
          this.blockMath = [];
          this.inlineMath = [];
  
          return md.replace(/(```[\s\S]*?```|`[^`\n]+`)|(\$\$[\s\S]+?\$\$)|(\$[^$\n]+\$)/g, (match, code, block, inline) => {
              // 如果代码块，不动，防止代码块被误处理
              if (code) return code;
  
              // 如果行间公式
              if (block) {
                  const formula = block.slice(2, -2);
                  const index = this.blockMath.length;
                  this.blockMath.push(`$$ \n\\displaylines{${formula}} \n$$`);
                  return `\n\n<div id="BLOCK_MATH_${index}"></div>\n\n`;
              }
  
              // 如果行内公式
              if (inline) {
                  const formula = inline.slice(1, -1);
                  // 如果只有一个$就跳过
                  if (formula.trim().length === 0) return inline;
                  const index = this.inlineMath.length;
                  this.inlineMath.push(`$${formula}$`);
                  return `INLINE_MATH_${index}`;
              }
  
              return match;
          });
      },
  
      restore(html) {
          // 还原行内
          this.inlineMath.forEach((math, i) => {
              html = html.replace(`INLINE_MATH_${i}`, math);
          });
          return html;
      },
  
      restoreBlocks(container) {
          // 还原块级
          this.blockMath.forEach((math, i) => {
              const el = container.querySelector(`#BLOCK_MATH_${i}`);
              if (el) el.outerHTML = math;
          });
      }
  };
  

2. 不换行，行间公式用\\来换行有问题

   可能是某些奇妙问题，我具体也不知道为什么。

   解决方案：给行间公式整体加上\displaylines{ <content> }（在上面的代码里）

   感谢大佬踩坑，这篇博客还有许多其他 MathJax 的坑：MathJax常见问题 | DaNing的博客

3. 某些功能用不了

   AI 说不能换行、\mathbf{}不能用，也可能是需要加 packages 中的配置。

   但是实测好像没什么影响，在这里给一个配置仅供参考：

   window.MathJax = {
               tex: {
                   inlineMath: [['$', '$'], ['\\(', '\\)']],
                   displayMath: [['$$', '$$'], ['\\[', '\\]']],
                   processEscapes: true,
                   packages: { '[+]': ['boldsymbol', 'ams'] }
               },
               options: {
                   skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
                   ignoreHtmlClass: 'tex2jax_ignore'
               }
           };
   

Mermaid 渲染

marked.js 渲染代码块时，渲染成如<code class="language-js"> console.log("0721") </code>的形式。如果是mermaid，他就属于类language-mermaid。

但是 mermaid 库默认识别的类名是.mermaid，需要自己取.language-mermaid扔给渲染库。

if (window.mermaid) {
    await mermaid.run({
    nodes: mainContent.querySelectorAll('.language-mermaid')
    }).catch(err => console.error('Mermaid Error:', err));
}