神代綺凜

[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

效果

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

另外,本文提供的这个 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 中扒出来并自己修改过的而已。

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

Leave a Comment

33 comments

  1. 左岸  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,如果你并不纠结于样式,本文讲的其他步骤可以省去

  2. 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)
        @神代綺凜

        昨天手贱把数据库删了,待会儿我重发

  3. 复制品  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)
                @复制品

                好吧

  4. 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 就行了…

      抱歉打扰了((

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

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

  6. 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

      主题自带……

  7. 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

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