在WordPress网站上支持Markdown、LaTeX

梦未

已于 2023-01-17 18:19:22 修改

阅读量2.9k

点赞数 3

分类专栏： # Web端开发文章标签： latex markdown wordpress javascript

于 2021-10-21 21:19:51 首次发布

本文链接：https://blog.csdn.net/weixin_42077074/article/details/120895262

版权

Web端开发专栏收录该内容

20 篇文章 1 订阅

订阅专栏

支持 Markdown

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档

Markdown 样例代码和效果图如下

在 WordPress 上安装 WP Githuber MD 插件即可支持使用 Markdown 撰写并发布文章

🗃️附件

WP Githuber MD 下载（二选一）

https://wordpress.org/plugins/wp-githuber-md/

https://github.com/terrylinooo/githuber-md

💬相关

Markdown 入门

https://bbs.craft.moe/d/32-markdown

支持 LaTeX

LaTeX 是一个排版系统，生成复杂表格和数学公式效果很好

LaTeX 样例代码和效果图如下

我们需要一个 Web 数学公式渲染库

MathJax.js 是一个 Web 数学公式渲染库，其中就支持 LaTeX，MathML 和 AsciiMath 中大多数公式符号。

KaTeX.js 也同样是一个 Web 数学公式渲染库，与前者相比，渲染速度更快，虽然支持不够全面，但仍能满足大多数的使用环境

二选一即可，要么借助 <script> ，要么直接通过插件引入其中一个

借助 `<script>` 引入 MathJax

先把 MathJax 项目文件下载下来（后文将项目文件夹命名为 mathjax ）

🗃️附件

MathJax 项目下载

https://github.com/mathjax/MathJax

在服务器上找到 WordPress 站点目录，如笔者的是 /www/wwwroot/[站点文件名]

在目录底下找到 wp-content/themes/[WordPress使用的主题名称]/header.php

如果你使用的 MathJax 版本是 2.x，则在<head>和</head>之中添加以下代码

<!--MathJax show start-->
<!--此处引入MathJax项目文件-->
<script type="text/javascript" async
          src="mathjax/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

<!--此处对MathJax进行配置-->
<script type="text/x-mathjax-config">
              MathJax.Hub.Config({
                showProcessingMessages: false, //关闭js加载过程信息
                messageStyle: "none", //不显示信息
                showMathMenu: false, //关闭右击菜单显示
                availableFonts: ["STIX", "TeX"], //可选字体
                jax: ["input/TeX", "output/HTML-CSS"],
                tex2jax: {
                  inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                  displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
                }
              });
</script>

如果你使用的 MathJax 版本是 3.x，则在 <head> 和 </head> 之中添加以下代码

 <!--MathJax show start-->

<!--此处引入MathJax项目文件-->
<script type="text/javascript" async src="mathjax/es5/tex-svg.js"></script>

<!--此处对MathJax进行配置-->
<script type="text/javascript">
    MathJax = {
        loader: {
            load: ['[tex]/physics']//增加扩展包，如不需要可以删去
        },
        tex: {
            inlineMath: [['$', '$'], ['\\(', '\\)']],//标记LaTeX公式的符号
            displayMath: [['$$', '$$'],['\\[', '\\]']],
            packages: {'[+]': ['physics']} //增加扩展包，如不需要可以删去
        }, 
        svg: {
            fontCache: 'global'
        },
        options: {
        enableMenu: false //关闭右击菜单显示
      }
    };
</script>
<!--此处是下载下来的MathJax项目文件-->

附加

关于 MathJax 不同版本的区别、配置方法、扩展包等可以查看官方文档

https://docs.mathjax.org/en/latest/index.html

通过插件引入 MathJax

在 WordPress 插件中找到 MathJax-LaTeX 并下载

先给出你 MathJax 的 JS 文件的 URL

随后可对 MathJax 进行配置（本质上和借助 <script> 引入 MathJax 是一样的）

加载

可以在当前页面使用短代码 [mathjax] 表示加载 MathJax，使用短代码 [nomathjax] 表示不加载 MathJax

如果勾选了“Force Load”，则表示无需 [mathjax]，默认就强制加载 MathJax

LaTeX 语法分隔符

既可以使用原生的 LaTeX 分隔符 $$、$$ 或 $、$

也可以使用该插件的分隔符 [latex] 、 [/latex]

假如勾选了“Use wp-latex syntax”，则还可用$latex 、 $

配置

“MathJax Configuration”项可以选择

default：一个包含几乎所有配置选项和描述它们的注释的文件，您可以根据需要对其进行编辑
TeX-AMS-MML_HTML or MML：允许在 TeX、LaTeX 或 MathML符号中指定数学，并包含 AMSmath 和AMSsymbols 包，如果浏览器支持 MathML，则使用 MathML 生成输出，否则使用 HTML-with-CSS 生成输出。
TeX-AMS_HTML：允许在 TeX 或 LaTeX 符号中指定数学，包括 AMSmath 和 AMSsymbols 包，并使用 HTML-CSS输出处理器生成输出
MML_HTML or MML：允许使用 MathML 符号指定数学，如果浏览器支持 MathML 输出，则生成MathML 输出，否则生成 HTML-CSS 输出
Accessible：本质上与 TeX-AMS-MML_HTMLorMML 相同，但是指定了一些设置以使 MathJax 更好地使用辅助技术(针对视力受损的人)

💬相关

详细 MathJax 配置介绍可以查看官方文档

https://docs.mathjax.org/en/v1.1-latest/configuration.html#loading

通过插件引入 KaTeX

在 WordPress 插件中找到 KaTeX 并下载

在文章中用分隔符 [katex] 、 [/katex]

梦未

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
在WordPress网站上支持Markdown、LaTeX

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档Markdown 样例代码和效果图如下在WordPress上安装插件即可支持MarkdownLaTeX 是一个排版系统，生成复杂表格和数学公式效果很好LaTeX 样例代码和效果图如下是一个Web数学公式渲染库，其中就支持LaTeX，MathML和AsciiMath 中大多数公式符号。此处我们通过来使WordPress支持LaTeX。先把MathJax项目文件下载下来（后文将项目文件夹命名为）可以借助，也可以通过插件引入Math
复制链接

扫一扫