需求

最近在折腾个人博客，想要Argon主题无论是PC还是手机都能实现以下功能：

Markdown格式编辑内容，并正常在网页上显示
网页上公式能够正确显示，并且不会影响页面内容
图片能够正确点击放大

公式无法正常解析

最开始是用的是WordPress市场中的插件WP Githuber MD 但是该插件并不支持行内公式的正常解析 $x=y$ 只支持公式块$$x=y$$，同时Markdown解析器会将原本的Latex公式中的字符解析为其他网页符号从而导致我们没办法在后续再通过其他方法来转换公式

这时候我发现了苏大一篇文章详细说明了其中的原因并且给出了一个针对Typcho的解决方案，近乎完美地解决MathJax与Marked的冲突 – 科学空间|Scientific Spaces

<div id="content"></div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@2.7.9/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script>
    function parseMarkdown(text) {
        var scripts = text.match(/<script[^>]*>([sS]*?)</script>/gi);
        text = marked.parse(text);
        return text.replace(/<script[^>]*>([sS]*?)</script>/gi, m => scripts.shift());
    }
    var div = document.getElementById('content');
    var div2 = document.createElement('div');
    div2.innerHTML = '**can** render: \(J'_\theta = J_\theta\)';
    MathJax.Hub.Queue(
        ['Typeset', MathJax.Hub, div2],
        function() {
            div.innerHTML = parseMarkdown(div2.innerHTML);
            div.querySelectorAll('.MathJax').forEach(e => e.remove());
            MathJax.Hub.Typeset(div);
        }
    );
</script>

简单尝试后发现WordPress会把原始的文本内容转换为HTML格式，因此无法直接是用上述方法，并且这种方式实际上是一种前端渲染方案，会导致网页加载缓慢。因此还是希望能够实现一种后端解决方案。

最终方案

参考wordpress+markdown+latex一个解决方式_wordpress latex-CSDN博客

使用Typora在本地编写Markdown

编写完成ctrl+A后全选内容选择导出成HTML代码

在WordPress发布

如果之前安装了WP Githuber MD，记得先禁用该插件

然后新建文章

选择文本

粘贴刚刚复制的文本进入文本框点击更新发布即可

Argon设置

公式长度超出页面的问题

由于Argon本身没有适配Typora输出公式的样式，因此会出现公式长度超出页面的情况

我们可以通过新增css来解决该问题

首先点击外观中的自定义

选择额外的CSS

粘贴下面的css代码并保存即可

.md-math-container {
    max-width: 100%;
    overflow-x: auto;
}

图片无法点击放大的问题

这个主要是Typora导出格式无法被argon识别导致（当argon_enable_lazyload开启时候内部正则表达式无法匹配）

简单的解决方法是关闭图片懒加载功能

修改正则表达式也可以实现同样的目的，但是可能存在其他兼容问题，目前没有修改

通过以上方式即可愉快的在WordPress上玩耍markdown和latex了

效果测试

行内公式 $x=x+y$

行间公式

超长公式

图片点击放大也可通过下面图片简单测试下

需求