如何引入 highlight.js 文件来实现wecenter编辑器里面的代码高亮
-
-
cooldev 这家伙很懒，还没有设置简介
1 人点赞了该文章 · 3034 浏览
<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
效果图：
全部 0条评论