[Typecho] 在主题与 EditorMD 前台解析冲突的情况下使用其样式及解决代码框错位问题

2019 年 01 月 24 日

3555 次浏览

4004字数

2019-01-24更新：解决代码框错位问题
2017-12-05更新：增加限制最大高度效果的方法示例

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

Head Pic: 「おぅっ」/「たんたんめん」のイラスト [pixiv]

解决方案

简述

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

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

解决方案步骤

主要步骤

1.使用 Parsedown 插件接管前台 Markdown 解析
经过测试这个插件可解析的 Markdown 语法多于 Typecho 的自带解析，而且不会有 PJAX 问题。

如果你使用其他的前台 Markdown 解析，不保证以下脚本的完全有效，可能需要根据实际情况自行魔改。
2.下载这个js脚本，上传到站点中任意位置，并在网页模板中引用（推荐在 body 尾部）
如果是 handsome 主题的话，footer.php位于(Typecho根目录)/usr/themes/handsome/component/footer.php，在</body>之前找个合适的位置插入即可。

<!-- In footer.php -->
<script type="text/javascript" src="(这个脚本的路径)"></script>

3.下载这个css样式，上传到站点中任意位置，并在网页模板头部引用
如果是 handsome 主题的话，header.php位于(Typecho根目录)/usr/themes/handsome/component/header.php，

<!-- In header.php -->
<head>
    ...
    <link href="(这个css的路径)" rel="stylesheet">
    ...
</head>

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

$(document).ready(editormdSupport);

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

可选步骤

如果觉得在刷新网页的时候会有一瞬间的文章样式改变而觉得很不舒服，可以在主题的文章输出模板中手动给文章所在的最近一级的 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 优先级关系等复杂问题：

文章最外层一定要有一个 id 为post-content的 div
文章次外层一定要有一个 class 包含entry-content的 div
并且不能保证与本站样式毫无偏差，具体还请根据需要魔改下方的源码来使用。

限制代码块最大高度

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

#postpage pre{
    max-height: calc(100vh - 100px);
}

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

源码（未压缩混淆）

//editormdSupport.js
function editormdSupport() {
    //使 EditorMD 的样式能应用于文章
    $('#post-content .entry-content').addClass('editormd-html-preview');
    //为每一行添加 li 标签以应用行标和奇偶行异色效果
    $('pre code').each(function() {
        var codeClass = $(this).attr('class');
        var codeTxt = $(this).html().split("\n");
        var finalHtml = '<ol class="linenums">';
        var lCnt = 0;
        for (var i = 0; i < codeTxt.length; i++) {
            finalHtml += '<li class="L' + lCnt + '"><code class="' + codeClass + '">' + codeTxt[i] + '</code></li>';
            if (++lCnt >= 10) lCnt = 0;
        }
        finalHtml += '</ol>';
        var pre = $(this).parent('pre');
        pre.addClass('prettyprint linenums prettyprinted');
        pre.html(finalHtml);
    });
    //调整 ol 宽度，解决每行底色覆盖不全问题
    $('pre ol.linenums').each(function() {
        var codes = $(this).find('code');
        var maxWidth = 0;
        $(codes).each(function() {
            var width = $(this).width();
            if (width > maxWidth) maxWidth = width;
        });
        $(this).width(maxWidth);
    });
}

解决代码框错位问题

找到editormd.preview.min.add.css
寻找

#post-content code:before{letter-spacing:-.2em;content:"\00a0"}#post-content pre>code{padding:0;margin:0;font-size:100%;word-break:normal;white-space:pre;background:0 0;border:0}#post-content .highlight{margin-bottom:16px}
#post-content .highlight pre,#post-content pre{padding:16px;overflow:auto;font-size:85%;background-color:#f7f7f7;border-radius:3px}#post-content .highlight pre{margin-bottom:0;word-break:normal}
#post-content pre code{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}#post-content pre code:after,#post-content pre code:before{content:normal}

删除即可