首页
分类
Links
About Me
Search
1
安装scim-googlepinyin@谷歌拼音输入法教程及错误解决办法
56,133 阅读
2
Windows下IP释放、更新、以及清除本地DNS缓存相关命令
11,732 阅读
3
中国移动烽火HG267GT、 HG260GT、烽火HG6821M光猫超级账号和超级密码
10,942 阅读
4
在 windows下刷日本 FC2 WHR-G301N路由器openwrt和DD-WRT教程(适用于XP/win7/win8)
10,314 阅读
5
微软skydrive网盘图片+MP3外链测试WordPress
8,601 阅读
杂文
学习
系统
电商
优惠
免费
软件
硬件
登录
Search
标签搜索
Godaddy
windows7
windows
WordPress
nginx
VPS
域名优惠码
openwrt
linux
优惠码
信用卡
免费空间
htaccess
Google
域名
Typecho
web.config
windows8
LEDE
主机
V-ZONE
累计撰写
127
篇文章
累计收到
282
条评论
首页
栏目
杂文
学习
系统
电商
优惠
免费
软件
硬件
页面
分类
Links
About Me
搜索到
1
篇与
的结果
2020-07-30
【转载】[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解决方案步骤主要步骤使用Parsedown 插件接管前台 Markdown 解析经过测试这个插件可解析的 Markdown 语法多于 Typecho 的自带解析,而且不会有 PJAX 问题。如果你使用其他的前台 Markdown 解析,不保证以下脚本的完全有效,可能需要根据实际情况自行魔改。下载这个js脚本,上传到站点中任意位置,并在网页模板中引用(推荐在 body 尾部)如果是 handsome 主题的话,footer.php位于(Typecho根目录)/usr/themes/handsome/component/footer.php,在</body>之前找个合适的位置插入即可。 复制1 2 下载这个css样式,上传到站点中任意位置,并在网页模板头部引用如果是 handsome 主题的话,header.php位于(Typecho根目录)/usr/themes/handsome/component/header.php, 复制1 2 3 4 5 6 ... ... 如果 Typecho 主题设置中有自定义 js 以及自定义 PAJX 回调函数 的话,比如 handsome 主题,则将以下 JavaScript 内容加入到这两个设置项中;若没有则需要自行在网页模板中引用并添加含有同样内容的 PJAX 回调函数 复制1$(document).ready(editormdSupport);完成以上 js 与 css 均已压缩、混淆可选步骤如果觉得在刷新网页的时候会有一瞬间的文章样式改变而觉得很不舒服,可以在主题的文章输出模板中手动给文章所在的最近一级的 div 加入 editormd-html-preview这个 class 即可。handsome 主题例子:编辑文件 (Typecho根目录)/usr/themes/handsome/post.php找到 复制1改为 复制1即可非 handsome 主题使用注意事项由于 css 优先级关系等复杂问题:文章最外层一定要有一个 id 为post-content的 div文章次外层一定要有一个 class 包含entry-content的 div并且不能保证与本站样式毫无偏差,具体还请根据需要魔改下方的源码来使用。限制代码块最大高度当代码块宽度太大需要左右滚动,而高度同时也超过屏幕高度时就会产生不方便横向滚动的尴尬情况,可以通过 css 解决这个问题。 复制1 2 3#postpage pre{ max-height: calc(100vh - 100px); }这句代码会将 pre代码块的最大高度限制为比屏幕高度低 100px源码(未压缩混淆) 复制1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30//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 = ''; var lCnt = 0; for (var i = 0; i < codeTxt.length; i++) { finalHtml += '' + codeTxt[i] + ''; if (++lCnt >= 10) lCnt = 0; } finalHtml += ' '; 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 中扒出来并自己修改过的而已。本文转自链接:https://moe.best/modification/typecho-editormd-solution.html
2020年07月30日
20 阅读
0 评论
0 点赞