[理工科]使用Markdown在WordPress和OneNote中记笔记

欢迎访问[]_(￣▽￣)*博客原文

起因

  富文本格式中最成功的一种,我认为是 HTML.这毫无疑问是当今互联网上流传最多的一种文本.(广义上的 HTML,包括了 H5,CSS3,JS)但是日常办公中,我们经常接触的是 word 文档,pdf 文档.然而这上面这三种格式,有利于排版或者有利于印刷,不方便进行写作和编辑.(不方便指的是文本编辑器写不了 QAQ)LaTeX 可以实现所想即所得的效果,但是想要实现预览,即所见即所得,编译链的配置也是十分麻烦的.

  这里就体现出 Markdown 这种标记语言的优势了,小巧,简单,适合速记,带基本的格式.虽然 Markdown 不能代替上面的排版格式,但是其简单的语法,内联 HTML 的特性,还是很适合记笔记,写博客,wiki 之类的文章.

  但是想要打印,发布到 wordpress,同步到 OneNote,将 Markdown 转换为其他格式是必不可少的一道工序.本文将介绍如何利用 VS code 编辑 Markdown,发布到 WordPress,将渲染好的网页插入到 OneNote 中.毕竟一本花费心血写出来的笔记,需要一个合适的内容管理系统.

  使用到的工具

• VS code 及 Markdown All in One,Markdown PDF 插件
• OneNote UWP 版本
• WordPress5.4 及 WP Editor.md 插件
• Google Chrome 浏览器

VS code 编辑 Markdown

  VS code 的确是一款优秀的 GUI 编辑器(虽然有时我也会在 VS code 的终端里面直接用 Vim).o(￣ ▽ ￣)o.配合下面的插件可以在 VS code 里面流畅地编辑 Markdown.

  此外还有诸如 Markdown Preview Enhanced,Markdown Preview Github Styling 等也非常好用.安装好 Markdown All in One 后就可以一边编辑 Markdown 一边实时预览了.

使用 Markdown 在 WordPress 上写文章

  脱离了 VS code 之后,会遇到各种障碍.WordPress 的编辑器从 5.X 以后的版本就逐渐不如人意了.使用 Markdown,你可以利用 VS code 生成的 HTML 配合 Markdown 和 Katex 的 CSS 与 JS 文件完成写作;也可以使用插件,但是需要更改一下在 VS code 中写好的文本.

  博主使用的 WordPress 插件是 WP Editor.md,虽然有 Bug 但是可以用.正常的 Markdown 语法可以支持,但是遇到公式,需要做微调.

  WP Editor.md 支持 Katex,其实在 VS code 上面使用的插件也是使用的 Katex.只是在翻译成 HTML 渲染的时候,WP Editor.md 遇到了如下问题:Katex 的公式内换行使用的是\\,在 WP Editor.md 中,需要输入三个\反斜杠;行内公式的希腊字母下标需要使用大括号.例如:$\overrightarrow{e_{\rho }}$,在行内编辑时需要写为:\vec{e_{\rho}}.

解决方法:

• 使用 VS code 将\\替换为\\\
• 使用 VS code 将行内的 希腊字母下标的 Katex 公式}_\rho替换为_{\rho}}

将 Markdown 文本输出到 OneNote

  OneNote 已经做的很好了,但是整体不如 Markdown 轻便,独立一格的数据库存储方式让人摸不着头脑,即使使用插件也不能支持全部的 Markdown 语法.使用 OneNote 也就方便设备间的协同与 Windows 设备上流畅的手写体验.

  OneNote 可以插入 HTML 的富文本,但是在 Markdown 渲染出的 HTML 面前,我还没有找到方法.可以插入 word 文档,但是 Pandoc 不能渲染 Katex 公式,明明在 Typora 上面是可以渲染的.于是我只能给出打印输出的方法,不能在 OneNote 里面编辑,但是可以查看.毕竟,使用 OneNote 对于我来讲,还是手写,也正是因为手写公式不如打印的工整,才考虑使用 Markdown.

1. 使用 VS code 将 Markdown 输出为 HTML

  使用 VS code 插件 Markdown PDF,并做如下配置.参考该篇博文的方法,在文件

C://Users/<username>/.vscode/extensions/yzane.markdown-pdf-<version>/template/template.html

的末尾添加 MathJax 的支持,复制粘贴进去.

<script
  type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax: {inlineMath: [['$', '$']]}, messageStyle: "none" });
</script>

  微调,MathJax 又是一种将 Markdown 翻译为 HTML 的方式,所以也会出现一些 Bug,博主遇到的是_字符,转义为成对的<em></em>,导致乱码;Katex 公式内换行的反斜杠一个会被翻译成转义字符的前缀,此时需要四个反斜杠:\\\\.解决方法:

• 使用 VS code 将_替换为_
• 使用 VS code 将\\替换为\\\\

2. HTML 打印到 OneNote 中

  在修改好的 md 文件中右键,单击 Markdown PDF:Export(html).得到 HTMl 文件.使用 Chrome 打开该文件,打印到 OneNote for Windows 中,在弹出的 OneNote 中选择输出的分区.

效果

在VS code中编辑Markdown

在WordPress中发布

在Chrome中预览HTML

在OneNote中打印输出