神代綺凛

[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(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

源码(未压缩混淆)

//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折优惠码BWH3HYATVBJW
年付$47CN2线路,1核/1G内存/20G硬盘/1T@1Gbps【点击购买
季付$47CN2 GIA线路,1核/1G内存/20G硬盘/1T@2.5Gbps【点击购买
Last modification:November 30th, 2018 at 04:57 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment Cancel reply

54 comments

  1. 哈喽狮  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 83.0.4103.116(Google Chrome 83.0.4103.116)
    EditorMD 与代码高亮工具 CodePrettify CSS 样式冲突的问题不知道怎么解决。虽然我取消了 EditorMD 的前台接管,但貌似 Markdown 代码部分的 CSS 还是 EditorMarkDown。
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 83.0.4103.61(Google Chrome 83.0.4103.61)
      @哈喽狮 取消接管以后 EditorMD 应该不会注入 CSS 了才对,例如本站就没有
  2. Raoby  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 80.0.3987.162(Google Chrome 80.0.3987.162)
    因为setuAPI关注的大佬,正好现在捣鼓自己网站遇到这个问题,翻到这篇文章帮大忙了
  3. 门寒子  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
    博主,EditorMD如何实现图片居中呢?
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
      @门寒子 Markdown 没有提供居中图片的语法
      只能通过 HTML + CSS 实现
      注:Markdown 里可以写 HTML
      1. 门寒子  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
        @神代綺凜 不知道为什么,我按照<center>![]()</center>以及<div align="center">![]()</div>这两种方式写,前台图片都没有解析出来,只是把中间的图片代码给居中了
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
          @门寒子 Markdown 虽然支持 HTML,但不能在未闭合标签内相互混用,在这时你只能统一用 HTML 或统一用 Markdown

          <div align="center"><img src="xxx" /></div>
          1. 门寒子  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
            @神代綺凜 这样啊,明白了,谢谢博主(/ω\)
  4. 才子  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
    楼主,CSS文件404了
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @才子 现在可以了,感谢提醒
      1. 才子  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
        @神代綺凜 博主,代码块太宽了咋自动换行⌇●﹏●⌇
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
          @才子 没试过,目前看到的都是不自动换行的
          1. 才子  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
            @神代綺凜 handsome5.1.1支持横向滑动了
            1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
              @才子 还没更,基本上不是很必要的话我都不会更新主题
              重新把要魔改的部分改一遍会麻烦到折寿
  5. BigRocs  Windows 10 x64 Edition(Windows 10 x64 Edition) / Sogou Explorer(Sogou Explorer)
    博主,你的代码高亮能分享下吗?我用handsome然后再用高亮插件,感觉好丑。
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      1.   Mac OS X(Mac OS X) / Safari 12.0(Safari 12.0)
        @神代綺凜 我想要代码的外框,高亮部分我有,就是不知道怎么实现外框和滚动条
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
          @邱 我是靠 js 人为改代码块结构的,具体结构可 F12 自行参考
  6. Noob  Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 71.0.3578.80(Google Chrome 71.0.3578.80)
    博主,我在自定js调用 editormdSupport函数报错,好像提示的找不到editormdSupport这个函数,但是我在footer里面引入了js文件
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.80(Google Chrome 71.0.3578.80)
      @Noob 在执行这句之前引入文件
      1. Noob  Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
        @神代綺凜 感谢博主,成功了!
  7. 左岸  Android 9(Android 9) / QQbrowser(QQbrowser)
    请问我更换editorMD编辑器之后,文章进去只有一个头图,要刷新一遍才能正常显示,可以通过您说的方法解决嘛
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
      @左岸 是,解决的关键只是禁用EditorMD前台解析接管和使用parsedown插件来解析MD,如果你并不纠结于样式,本文讲的其他步骤可以省去
  8. Noob  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
    博主,这种情况你遇到过吗?
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
      @Noob 木有图
      1. Noob  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
        @神代綺凜 编辑器乱码,然后换了个浏览器功能不能使用
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
          @Noob 字体文件的跨域问题,你F12就能看到错误

          你可能是用了cdn导致的,给调用字体文件的那个来源配置允许跨域

          1. Noob  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
            @神代綺凜 但是可以手动输入HTML或者markdown没有问题
            1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
              @Noob 不造,看F12有什么错吧
              1. Noob  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
                @神代綺凜 妈耶,看来我的js学的还不是很好,我还是滚回去学jsp算了
                1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
                  1. Noob  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
                    @神代綺凜 真的是操了都,刚开始我在浏览器后面加了条参数"--disable-web-security"允许跨域访问,虽然乱码解决了,但是功能还是不能用,然后今天晚上用室友的电脑,然后我点开了新建文章,发现tm的竟然可以用了,然后我在用自己的电脑,还是用不起,确定是电脑的问题,折腾了半天,终于好了(看来我需要换台电脑了 )
                    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
                      @Noob 那啥,允许跨域是在服务器端例如nginx配置的啊,也不是调浏览器啊
                      1. Noob  Mac OS X(Mac OS X) / Mozilla Compatible(Mozilla Compatible)
                        @神代綺凜 或者用opera浏览器不会报错
                      2. Noob  Mac OS X(Mac OS X) / Mozilla Compatible(Mozilla Compatible)
                        @神代綺凜 可以用浏览器临时的调,还有。我绑了两个不同的域名。我删了一个就没报错了
                        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
                          @Noob 这就是跨域原因所在了
                          1. Noob  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
                            @神代綺凜 可以修改一下Nginx的配置文件

                            http {
                            ......
                            add_header Access-Control-Allow-Origin *;
                            add_header Access-Control-Allow-Headers X-Requested-With;
                            add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
                            ......
                            }

                            来实现跨域
          2. Noob  Windows 10 x64 Edition(Windows 10 x64 Edition) / Opera 56.0.3051.52(Opera 56.0.3051.52)
            @神代綺凜 字体解决了,但是功能不能使用了
      2. Noob  Mac OS X(Mac OS X) / Mozilla Compatible(Mozilla Compatible)
        @神代綺凜 昨天手贱把数据库删了,待会儿我重发
  9. 复制品  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.81(Google Chrome 69.0.3497.81)
    你好,我按照你的方案步骤进行操作之后,前端没有“代码块行标 + 奇偶行异色样式”,请问是还缺少了什么设置吗?
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
      @复制品 信息过少无法解答
      1. 复制品  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.81(Google Chrome 69.0.3497.81)
        @神代綺凜 很抱歉我描述的不够清楚,我目前也在使用handsome 主题,版本为 4.5.1,已安装并打开EditorMD 和Parsedown 插件,同时执行了本文的主要步骤部分,最终效果:MarkDown的样式已经替换过来了,但只有代码块部分的行标和奇偶行异色没有出现。
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
          @复制品 请问你的博客地址是什么?
          1. 复制品  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.81(Google Chrome 69.0.3497.81)
            1. 复制品  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.81(Google Chrome 69.0.3497.81)
              @复制品 我找到原因了,之前从大佬这里取的脚本我修改了一段,改回来就可以显示了,谢谢大佬
              1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
                @复制品 好吧
  10. 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 就行了…

      抱歉打扰了((
  11. UYang  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 53.0.2785.104(Google Chrome 53.0.2785.104)
    您好,请教一下,您版权信息中的【所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
    您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。】这句话里面的超链接是怎么加进去的呢?
  12. 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 主题自带……
  13. 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 不清楚,我没有删过正常留言啊