[转载][Typecho] 在主题与 EditorMD 前台解析冲突的情况下使用其样式.

博主： banalala
发布时间：2017 年 10 月 29 日
4424 次浏览
1 条评论
1945字数
分类：

> 文章转载至*[ 神代綺凜](https://lolico.moe " 神代綺凜")*：[[Typecho] 在主题与 EditorMD 前台解析冲突的情况下使用其样式](https://lolico.moe/modification/typecho-editormd-solution.html "[Typecho] 在主题与 EditorMD 前台解析冲突的情况下使用其样式")

在前台非 EditorMD 解析的情况下使用 EditorMD 的前台 Markdown 样式，包括 EditorMD 那超赞的代码块行标 + 奇偶行异色样式。用于解决与目前 handsome 4.0 主题的冲突。
没有 EditorMD 我要死了.jpg

# 解决方案
## 简述
由于 handsome 4.0 主题的 PJAX 与 EditorMD 前台 Markdown 解析接管没有很好的契合，会导致 PJAX 加载后文章内容不解析的情况，此时适用这一解决方案。
如果其他主题也有类似情况，那么可以尝试。

注：EditorMD 的 css 样式实际上是大多是来源于
https://github.com/sindresorhus/github-markdown-css
## 解决方案步骤
### 主要步骤
1. 使用 [Parsedown](https://github.com/kokororin/typecho-plugin-Parsedown "Parsedown") 插件接管前台 Markdown 解析
经过测试这个插件可解析的 Markdown 语法多于 Typecho 的自带解析，而且不会有 PJAX 问题。
<div class="red">首先要取消掉 EditorMD 插件中的 **&#40;接管前台Markdown解析并启用ToC、TeX科学公式、流程图 Flowchart、时序图 Sequence Diagram 等扩展 &#41;</div>

>**首先要取消掉 EditorMD 插件中的 **&#40;接管前台Markdown解析并启用ToC、TeX科学公式、流程图 Flowchart、时序图 Sequence Diagram 等扩展 &#41;

2. 下载 [这个js脚本](/usr/js/editormdSupport.js "这个js脚本")，上传到站点中任意位置，并在网页模板中引用（推荐在 body 尾部）
如果是 handsome 主题的话，`footer.php`位于`(Typecho根目录)/usr/themes/handsome/component/footer.php`，在`</body>`之前找个合适的位置插入即可。
```

<script type="text/javascript" src="(这个脚本的路径)"></script>
```
3. 下载 [这个css样式](/usr/css/editormd.preview.min.mod.css "这个css样式")，上传到站点中任意位置，并在网页模板头部引用
如果是 handsome 主题的话，`header.php`位于(Typecho根目录)`/usr/themes/handsome/component/header.php`，
```

<head>
    ...
    <link href="(这个css的路径)" rel="stylesheet">
    ...
</head>
```
4. 如果 Typecho 主题设置中有 自定义 js 以及 自定义 PAJX 回调函数 的话，比如 handsome 主题，则将以下 JavaScript 内容加入到这两个设置项中；若没有则需要自行在网页模板中引用并添加含有同样内容的 PJAX 回调函数
```
editormdSupport();
```
5. 完成

------------

### 可选步骤
如果觉得在刷新网页的时候会有一瞬间的文章样式改变而觉得很不舒服，可以在主题的文章输出模板中手动给文章所在的最近一级的 `div` 加入`editormd-html-preview`这个 class 即可。
handsome 主题例子：
编辑文件(Typecho根目录)`/usr/themes/handsome/post.php`
找到

```
<div class="entry-content l-h-2x">
```
改为

```
<div class="entry-content l-h-2x editormd-html-preview">
```

即可
#### 非 handsome 主题使用注意事项
由于 css 优先级关系等复杂问题：

1. 文章最外层一定要有一个 id 为post-content的 div
2. 文章次外层一定要有一个 class 包含entry-content的 div

并且不能保证与本站样式毫无偏差，具体还请根据需要魔改下方的源码来使用。

最后修改：2017 年 11 月 13 日