Markdown 属于那种用过以后就再也停不下来的工具，个人习惯在网站发布文章前，先用 Markdown 编辑好，然后提交到 GitHub 保存，再将文件复制到 WordPress 编辑器。
但是如何保持 Markdown 编辑器和 WordPress 站点页面展示效果完全一致，同时复制后还不出现格式不支持问题，是一个头疼的事。网上一些文章说用插件来导入 Markdown 文件，但是测试发现这种方式比较重，效果也不太理想，会出一些奇怪问题。
使用 Typora
一开始用 Visual Studio Code 做编辑器，但是右侧的实时预览样式和网页差别比较大，有时候可能无法表现网页的效果。在试用几款其他编辑器后，发现 Typora 的样式和网站十分相似，几乎可以作为网页预览，同时复制到古腾堡编辑器后完全没有格式问题。
特地做了一个包含 WordPress 主流格式的样例文件，在网站和编辑器展示效果如下图。
本站按上图的内容发布了网站展示页面，除公式等特殊格式外，可以直接从网页复制到编辑器，格式自适应。
在 Typora 中选取“编辑”>“复制为 Markdown”，或者直接用快捷键 Ctrl + Shift + C 复制，粘贴到 WordPress 编辑器，就能达到完全一样的效果。
代码块
WordPress 新版本的古腾堡编辑器对 Markdown 代码块的支持还不错，复制进去直接就能转换成大致的展示效果。
如果想要达到更显眼的高亮效果，推荐使用插件，本站采用 Enlighter，展示样式比默认代码块要更好看一些。
但是插件有个无法自动完成的功能，就是在复制进编辑器以后插件直接识别 Markdown 指定的代码语言类型。它只会用默认的高亮设置来展示，想要达到不同语言的最佳高亮效果，还需要手动设置代码块的语言类型。
这个问题在古腾堡和 Enlighter 源代码改了一整晚，也没能做到自动设置。主要原因还是古腾堡会在粘贴时把代码块转换成 html 标签，同时去掉 language 属性，导致插件获取的数据不全，无法按语言自动选择样式。
尝试过使用其他插件，同样因为从古腾堡获取的源数据就没有语言类型，导致无法自动识别。
学艺不精，最终没能解决问题，惭愧。
公式
另外公式部分 WordPress 无法原生支持，看了下也有插件可用，但是个人还是喜欢使用更简单的方式。
在“管理后台”>“外观”>“主题编辑器”中找到“主题页眉(header.php)”，搜索定位到<?php wp_head(); ?>，在前一行加入 MathJax 的支持：
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.2/es5/tex-mml-chtml.js"></script>
复制的公式就能像图里一样完美展示了。js 文件用的 JSDelivr 的 CDN，加载速度和可用性有保障。
发表回复