markdown

markdown

如何引入 highlight.js 文件来实现wecenter编辑器里面的代码高亮

WeCenter 程序cooldev 发表了文章 • 0 个评论 • 357 次浏览 • 2019-02-19 10:55 • 来自相关话题

  <link href="https://apps.bdimg.com/libs/highlight.js/9.1.0/styles/monokai-sublime.min. ...查看全部
 


<link href="https://apps.bdimg.com/libs/highlight.js/9.1.0/styles/monokai-sublime.min.css" rel="stylesheet">  


<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js"></script>  


<script >hljs.initHighlightingOnLoad();</script>  


<script >


document.addEventListener('DOMContentLoaded', (event) => {


  document.querySelectorAll('div pre').forEach((block) => {


    hljs.highlightBlock(block);


  });


});


 


</script>   


 


第一步:


 


把上面这段代码插入到header_meta.tpl.htm  文件的  <head> </head> 标签中,注意这段js代码中



document.addEventListener('DOMContentLoaded', (event) => {


  document.querySelectorAll('div pre').forEach((block) => {


    hljs.highlightBlock(block);


  });


});



 


每句代码的具体意思。


 


第二步:


 


然后修改:static/css/default/common.css 里面的 .markitup-box pre 里面的background颜色代码。我修改成了


.markitup-box pre {margin:10px 0;padding: 16px;line-height: 20px;overflow: hidden; border: none; border-radius: 3px; background-color: #2d2d2d;font-size: 14px;font-family: monospace; white-space: pre-wrap;}


 


去后台清除cookie,清除浏览器cookie,就可以测试出实际效果了


 


 


 


文件地址:/views/default/global/header_meta.tpl.htm  


 


参考的文档:https://highlightjs.org/usage/ 


 


 


效果图:


 




 



给3.1.9强撸了一个markdown在线编辑器

evildoer_ke 回复了问题 • 22 人关注 • 12 个回复 • 2482 次浏览 • 2016-12-19 15:26 • 来自相关话题

什么时候发布带有markdown的编辑器啊?

xxxky 回复了问题 • 2 人关注 • 1 个回复 • 651 次浏览 • 2016-10-10 15:25 • 来自相关话题

如何把编辑器更换回Markdown。

回复

net 发起了问题 • 3 人关注 • 0 个回复 • 949 次浏览 • 2016-09-13 15:10 • 来自相关话题

关于markdown编辑器的问题,为什么编辑器要全局设置,用户设置自己偏好不行吗?

回复

JimmyChen 发起了问题 • 1 人关注 • 0 个回复 • 567 次浏览 • 2016-08-09 13:18 • 来自相关话题

测试一下吧

回复

Asura 发起了问题 • 1 人关注 • 0 个回复 • 613 次浏览 • 2016-02-03 15:12 • 来自相关话题

3.0.6,markdown语法没有解析????

回复

一杯咖啡就瞌睡 发起了问题 • 1 人关注 • 0 个回复 • 763 次浏览 • 2015-12-15 15:23 • 来自相关话题

我觉得应该全面支持markdown!而且更应该是在评论也支持markdown。

DT27 回复了问题 • 4 人关注 • 2 个回复 • 997 次浏览 • 2015-07-31 12:05 • 来自相关话题

wecenter3.12嵌入Markdown 编辑器 公式,流程图,时序图,表格,目录导航,等等全支持

zhengqiang 回复了问题 • 21 人关注 • 12 个回复 • 4379 次浏览 • 2015-06-05 10:05 • 来自相关话题

求现有编辑器改为markdown的方法?一起众筹一款好编辑器吧

匿名用户 回复了问题 • 6 人关注 • 4 个回复 • 1362 次浏览 • 2015-05-17 09:35 • 来自相关话题

条新动态, 点击查看
itfanr

itfanr 回答了问题 • 2016-10-10 09:33 • 12 个回复 不感兴趣

给3.1.9强撸了一个markdown在线编辑器

赞同来自:

好东西啊   gocn.io  看看这个站点
好东西啊   gocn.io  看看这个站点

给3.1.9强撸了一个markdown在线编辑器

回复

evildoer_ke 回复了问题 • 22 人关注 • 12 个回复 • 2482 次浏览 • 2016-12-19 15:26 • 来自相关话题

什么时候发布带有markdown的编辑器啊?

回复

xxxky 回复了问题 • 2 人关注 • 1 个回复 • 651 次浏览 • 2016-10-10 15:25 • 来自相关话题

如何把编辑器更换回Markdown。

回复

net 发起了问题 • 3 人关注 • 0 个回复 • 949 次浏览 • 2016-09-13 15:10 • 来自相关话题

关于markdown编辑器的问题,为什么编辑器要全局设置,用户设置自己偏好不行吗?

回复

JimmyChen 发起了问题 • 1 人关注 • 0 个回复 • 567 次浏览 • 2016-08-09 13:18 • 来自相关话题

测试一下吧

回复

Asura 发起了问题 • 1 人关注 • 0 个回复 • 613 次浏览 • 2016-02-03 15:12 • 来自相关话题

3.0.6,markdown语法没有解析????

回复

一杯咖啡就瞌睡 发起了问题 • 1 人关注 • 0 个回复 • 763 次浏览 • 2015-12-15 15:23 • 来自相关话题

我觉得应该全面支持markdown!而且更应该是在评论也支持markdown。

回复

DT27 回复了问题 • 4 人关注 • 2 个回复 • 997 次浏览 • 2015-07-31 12:05 • 来自相关话题

wecenter3.12嵌入Markdown 编辑器 公式,流程图,时序图,表格,目录导航,等等全支持

回复

zhengqiang 回复了问题 • 21 人关注 • 12 个回复 • 4379 次浏览 • 2015-06-05 10:05 • 来自相关话题

求现有编辑器改为markdown的方法?一起众筹一款好编辑器吧

回复

匿名用户 回复了问题 • 6 人关注 • 4 个回复 • 1362 次浏览 • 2015-05-17 09:35 • 来自相关话题

给官方提一个建议,应该考虑全面支持markdown。

回复

nongfu998 回复了问题 • 10 人关注 • 7 个回复 • 1773 次浏览 • 2015-04-10 22:45 • 来自相关话题

如何引入 highlight.js 文件来实现wecenter编辑器里面的代码高亮

WeCenter 程序cooldev 发表了文章 • 0 个评论 • 357 次浏览 • 2019-02-19 10:55 • 来自相关话题

  <link href="https://apps.bdimg.com/libs/highlight.js/9.1.0/styles/monokai-sublime.min. ...查看全部
 


<link href="https://apps.bdimg.com/libs/highlight.js/9.1.0/styles/monokai-sublime.min.css" rel="stylesheet">  


<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js"></script>  


<script >hljs.initHighlightingOnLoad();</script>  


<script >


document.addEventListener('DOMContentLoaded', (event) => {


  document.querySelectorAll('div pre').forEach((block) => {


    hljs.highlightBlock(block);


  });


});


 


</script>   


 


第一步:


 


把上面这段代码插入到header_meta.tpl.htm  文件的  <head> </head> 标签中,注意这段js代码中



document.addEventListener('DOMContentLoaded', (event) => {


  document.querySelectorAll('div pre').forEach((block) => {


    hljs.highlightBlock(block);


  });


});



 


每句代码的具体意思。


 


第二步:


 


然后修改:static/css/default/common.css 里面的 .markitup-box pre 里面的background颜色代码。我修改成了


.markitup-box pre {margin:10px 0;padding: 16px;line-height: 20px;overflow: hidden; border: none; border-radius: 3px; background-color: #2d2d2d;font-size: 14px;font-family: monospace; white-space: pre-wrap;}


 


去后台清除cookie,清除浏览器cookie,就可以测试出实际效果了


 


 


 


文件地址:/views/default/global/header_meta.tpl.htm  


 


参考的文档:https://highlightjs.org/usage/ 


 


 


效果图: