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

cooldev
cooldev 这家伙很懒,还没有设置简介...

1 人点赞了该文章 · 2290 浏览

 
<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/ 
 
 
效果图:
 
 

发布于 2019-02-19 10:55

免责声明:

本文由 cooldev 原创发布于 WeCenter ,著作权归作者所有。

登录一下,更多精彩内容等你发现,贡献精彩回答,参与评论互动

登录! 还没有账号?去注册

暂无评论

All Rights Reserved Powered BY WeCenter V4.0.3 © 2022