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

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

# 解决方案

## 简述

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

注：EditorMD 的 css 样式实际上是大多是来源于
[https://github.com/sindresorhus/github-markdown-css](https://github.com/sindresorhus/github-markdown-css)

## 解决方案步骤

### 主要步骤

1. 使用[Parsedown](https://github.com/kokororin/typecho-plugin-Parsedown "Parsedown") 插件接管前台 Markdown 解析
   经过测试这个插件可解析的 Markdown 语法多于 Typecho 的自带解析，而且不会有 PJAX 问题。
   如果你使用其他的前台 Markdown 解析，不保证以下脚本的完全有效，可能需要根据实际情况自行魔改。
2. 下载[这个js脚本](https://moe.best/usr/js/editormdSupport.js "右击另存为")，上传到站点中任意位置，并在网页模板中引用（推荐在 body 尾部）
   如果是 handsome 主题的话，`footer.php`位于`(Typecho根目录)/usr/themes/handsome/component/footer.php`，在`</body>`之前找个合适的位置插入即可。

<div id="code-0" class="pre-div"><code class="language-html hljs xml"><span class="hljs-comment"></span>
   <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"(这个脚本的路径)"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></div>

</pre>

3. 下载[这个css样式](https://moe.best/usr/plugins/EditorMD/css/editormd.preview.min.mod.css "右击另存为")，上传到站点中任意位置，并在网页模板**头部**引用
   如果是 handsome 主题的话，`header.php`位于`(Typecho根目录)/usr/themes/handsome/component/header.php`，

<div id="code-1" class="pre-div"><code class="language-html hljs xml"><span class="hljs-comment"></span>
   <span class="hljs-tag"><<span class="hljs-name">head</span>></span>
       ...
       <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"(这个css的路径)"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span>></span>
       ...
   <span class="hljs-tag"></<span class="hljs-name">head</span>></span></code></div>

</pre>

4. 如果 Typecho 主题设置中有**自定义 js** 以及**自定义 PAJX 回调函数** 的话，比如 handsome 主题，则将以下 JavaScript 内容加入到这两个设置项中；若没有则需要自行在网页模板中引用并添加含有同样内容的 PJAX 回调函数

<div id="code-2" class="pre-div"><code class="language-javascript hljs">$(<span class="hljs-built_in">document</span>).ready(editormdSupport);</code></div>

</pre>

5. 完成

以上 js 与 css 均已压缩、混淆

### 可选步骤

如果觉得在刷新网页的时候会有一瞬间的文章样式改变而觉得很不舒服，可以在主题的文章输出模板中手动给文章所在的最近一级的 div 加入 `editormd-html-preview`这个 class 即可。

**handsome 主题例子：**
编辑文件 `(Typecho根目录)/usr/themes/handsome/post.php`
找到

<div id="code-3" class="pre-div"><code class="language-html hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"entry-content l-h-2x"</span>></span></code></div>

</pre>

改为

<div id="code-4" class="pre-div"><code class="language-html hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"entry-content l-h-2x editormd-html-preview"</span>></span></code></div>

</pre>

即可

### 非 handsome 主题使用注意事项

由于 css 优先级关系等复杂问题：

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

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

### 限制代码块最大高度

当代码块宽度太大需要左右滚动，而高度同时也超过屏幕高度时就会产生不方便横向滚动的尴尬情况，可以通过 css 解决这个问题。

<div id="code-5" class="pre-div"><code class="language-css hljs"><span class="hljs-selector-id">#postpage</span> <span class="hljs-selector-tag">pre</span>{
    <span class="hljs-attribute">max-height</span>: <span class="hljs-built_in">calc</span>(100vh - 100px);
}</code></div>

</pre>

这句代码会将 `pre`代码块的最大高度限制为比屏幕高度低 `100px`

## 源码（未压缩混淆）

<div id="code-6" class="pre-div"><code class="language-javascript hljs"><span class="hljs-comment">//editormdSupport.js</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">editormdSupport</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">//使 EditorMD 的样式能应用于文章</span>
    $(<span class="hljs-string">'#post-content .entry-content'</span>).addClass(<span class="hljs-string">'editormd-html-preview'</span>);
    <span class="hljs-comment">//为每一行添加 li 标签以应用行标和奇偶行异色效果</span>
    $(<span class="hljs-string">'pre code'</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">var</span> codeClass = $(<span class="hljs-keyword">this</span>).attr(<span class="hljs-string">'class'</span>);
        <span class="hljs-keyword">var</span> codeTxt = $(<span class="hljs-keyword">this</span>).html().split(<span class="hljs-string">"\n"</span>);
        <span class="hljs-keyword">var</span> finalHtml = <span class="hljs-string">'<ol class="linenums">'</span>;
        <span class="hljs-keyword">var</span> lCnt = <span class="hljs-number">0</span>;
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < codeTxt.length; i++) {
            finalHtml += <span class="hljs-string">'<li class="L'</span> + lCnt + <span class="hljs-string">'"><code class="'</span> + codeClass + <span class="hljs-string">'">'</span> + codeTxt[i] + <span class="hljs-string">'</code></li>'</span>;
            <span class="hljs-keyword">if</span> (++lCnt >= <span class="hljs-number">10</span>) lCnt = <span class="hljs-number">0</span>;
        }
        finalHtml += <span class="hljs-string">'</ol>

'</span>;
        <span class="hljs-keyword">var</span> pre = $(<span class="hljs-keyword">this</span>).parent(<span class="hljs-string">'pre'</span>);
        pre.addClass(<span class="hljs-string">'prettyprint linenums prettyprinted'</span>);
        pre.html(finalHtml);
    });
    <span class="hljs-comment">//调整 ol 宽度，解决每行底色覆盖不全问题</span>
    $(<span class="hljs-string">'pre ol.linenums'</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">var</span> codes = $(<span class="hljs-keyword">this</span>).find(<span class="hljs-string">'code'</span>);
        <span class="hljs-keyword">var</span> maxWidth = <span class="hljs-number">0</span>;
        $(codes).each(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
            <span class="hljs-keyword">var</span> width = $(<span class="hljs-keyword">this</span>).width();
            <span class="hljs-keyword">if</span> (width > maxWidth) maxWidth = width;
        });
        $(<span class="hljs-keyword">this</span>).width(maxWidth);
    });
}</code></div>

</pre>

css 文件不放源码，实际上就是从 EditorMD 中扒出来并自己修改过的而已。
**本文转自链接**：https://moe.best/modification/typecho-editormd-solution.html

本文地址：https://vzone.me/885/

如果对本文有什么问题或疑问都可以在评论区留言，我看到后会尽量解答。

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

发表评论

表情类型

目录