行业新闻

    wordpress 代码高亮使用 highlight.js 突出显示 Vue 中的代码

    2022-06-23    来源：www.8001717.cn

    使用 .js 突出显示 Vue 中的代码

    VUE .js

    当有些网页有在线编辑页面时wordpress 代码高亮wordpress网站制作，我们不希望每个代码类型都一样

    1、高亮介绍wordpress 代码高亮wordpress做网站，在main.js文件中全局导入

    import Vue from 'vue'
<p><img src='http://pic1.zhimg.com/v2-5345c468ed9eb88e33347ec07a7e03bc_b.gif' alt='wordpress 代码高亮_syntaxhighlighter动态高亮代码_wordpress 代码高亮'/></p>
import App from './App.vue'
import $ from 'jquery'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import router from "./router/index.js"
<p><img src='http://img.php.cn/upload/jscode/000/120/096/5dc3b565c3d45983.jpg' alt='syntaxhighlighter动态高亮代码_wordpress 代码高亮_wordpress 代码高亮'/></p>
import hljs from 'highlight.js';
import 'highlight.js/styles/googlecode.css'
Vue.use(hljs)
Vue.use(ElementUI);
<p><img src='http://pic4.zhimg.com/50/v2-0f04032f99dcd37457ecde86a739c98d_hd.jpg' alt='syntaxhighlighter动态高亮代码_wordpress 代码高亮_wordpress 代码高亮'/></p>
Vue.config.productionTip = false
Vue.directive('highlight',function(el){
	let highlight = el.querySelectorAll("pre code");
	highlight.forEach((block) =>{
<p><img src='http://img-blog.csdnimg.cn/20210215175417414.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDE4NTk4,size_16,color_FFFFFF,t_70#pic_center' alt='syntaxhighlighter动态高亮代码_wordpress 代码高亮_wordpress 代码高亮'/></p>
		hljs.highlightBlock(block)
	})
})
<p><img src='http://boke.yigujin.cn/img/2019/190703_gaoliang2.png' alt='wordpress 代码高亮_wordpress 代码高亮_syntaxhighlighter动态高亮代码'/></p>
new Vue({
	router,
  render: h => h(App),
}).$mount('#app')

    文章来自互联网，侵权请联系删除，文章阐述观点来自文章出处，并不代表本站观点。 www.8001717.cn



X