神代綺凜

[Typecho] 在主题与 EditorMD 前台解析冲突的情况下使用其样式
2017-12-05更新:增加限制最大高度效果的方法示例 在前台非 EditorMD 解析的情况下使用 Edito...
扫描右侧二维码阅读全文
05
2017/12

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

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(function(){editormdSupport()};
  5. 完成

以上 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 优先级关系等复杂问题:

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

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

限制代码块最大高度

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

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

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

效果

本站目前使用的就是这个解决方案。

另外,本文提供的这个 css 也可以用来修正 EditorMD 接管前台 MarkDown 解析之后样式不正确的问题。

源码(未压缩混淆)

//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);
    });
}

css 文件不放源码,实际上就是从 EditorMD 中扒出来并自己修改过的而已。

搬瓦工VPS优惠套餐又又又补货啦,建站稳如狗,支持支付宝,循环出账94折优惠码BWH26FXH3HIQ
①年付仅需$18电信联通直连的亚洲优化线路,1核/512M内存/10G硬盘/1000GB@1Gbps【点击购买
②年付$18的可换成CN2线路(流量会变为180G),1核/512M内存/10G硬盘/500GB@1Gbps【点击购买
③年付$28的电信CN2联通直连线路,1核/512M内存/10G硬盘/500GB@1Gbps【点击购买】(购买后请到后台切DC8机房以获得最佳体验)

我的文章对您有帮助吗?
我很可爱 请给我钱
扫一扫拿红包 → 扫商家收款码 → 转账与红包相等的金额
即可免费赞赏,又可拿支付宝奖励金!
现在支付宝超抠门的,红包只给一两分钱了
Last modification:May 6th, 2018 at 05:15 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

8 comments

  1. Hakula  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)

    您好,想请教一下关于 EditorMD,我这边在后台编辑文章时,如果进去以后不点鼠标,只用键盘是可以正常编辑的,但一旦点了一下 EditorMD 的界面后就无法编辑了,光标也不显示,就像输入框失去焦点了一样。这个问题只在 chrome 下有,换用 edge 后就一切正常了… 我用的是 typecho + handsome + EditorMD for typecho,不知道如何解决… 谢谢大佬(

    1. Hakula  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
      @Hakula

      您好,没事了,已解决

      原来是关于鼠标点击还是触屏点击识别的问题,把对应函数的 return 值强制改成 click 就行了…

      抱歉打扰了((

  2. UYang  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 53.0.2785.104(Google Chrome 53.0.2785.104)

    您好,请教一下,您版权信息中的【所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
    您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。】这句话里面的超链接是怎么加进去的呢?

  3. XXS  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.139(Google Chrome 66.0.3359.139)

    请教一下大佬用的代码高亮插件是哪一款?我用CodeHighlighter在移动端不显示格式 在PC端正常。。。

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
      @XXS

      主题自带……

  4. Eluo  Mac OS X 10.13.0(Mac OS X 10.13.0) / Google Chrome 65.0.3325.181(Google Chrome 65.0.3325.181)

    看了很多很多遍了.非常感谢你的分享.

    1. Eluo  Mac OS X 10.13.0(Mac OS X 10.13.0) / Google Chrome 65.0.3325.181(Google Chrome 65.0.3325.181)
      @Eluo

      我记得之前有留言过啊.怎么没有了.

      1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
        @Eluo

        不清楚,我没有删过正常留言啊