V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
wwwwzf
V2EX  ›  Vue.js

哪位达人指导下,在 vue cli 中如何使用 highlightjs-line-numbers 插件?

  •  
  •   wwwwzf ·
    zoomla · 2020-02-19 15:30:51 +08:00 · 2467 次点击
    这是一个创建于 1499 天前的主题,其中的信息可能已经有所发展或是发生改变。

    highlight.js是用来高亮显示代码的工具。 配合它还有一个显示行号的插件highlightjs-line-numbers.js

    在传统网页中,使用方法:

    hljs.initHighlightingOnLoad();
    hljs.initLineNumbersOnLoad();
    

    在 vue cli 开发中无法使用成功,这是我的语法,哪位大哥指导下:

    <script>
    import hljs from 'highlight.js'
    import 'highlight.js/styles/atom-one-dark.css'
    import 'highlightjs-line-numbers.js/src/highlightjs-line-numbers.js'
     
     //Markdown 编辑器之行号与加色显示
     
     /*
    // lineNumbersBlock 不会引用,无法产生行号
    文档:
    https://rkroom.com/post/nuxt-vue-layout-style
    https://github.com/wcoder/highlightjs-line-numbers.js/
    */
    
    
    
    const highlightCode = () => {
      const preEl = document.querySelectorAll('pre')
      
      preEl.forEach((el) => {
        hljs.highlightBlock(el);
      });
      
      
    }
    
    
    
    
    export default {
    name: 'myContent',
     data: function () {
    	var ref = this;
    	var id = ref.$route.params.id;
    	var model = {conMod: {createTime:""}, node: {}};
    	this.jsp("content_get",{"id":id}).then((ret)=>{
    		model.conMod=JSON.parse(ret.result)[0];
    		this.jsp("model_get",{"id":model.conMod.modelId}).then((ret)=>{model.node=JSON.parse(ret.result);})
    	})
    	return model;
    },
    methods: {
    	navToList: function () { this.$route.push("/list/" + this.conMod.ModelID); }
    	
    },
    mounted() {
            highlightCode()
            lineNumbersBlock()
        },
    updated () {
    	highlightCode()
    	lineNumbersBlock()
    	}
    }
    </script>
    
    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3330 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 13:18 · PVG 21:18 · LAX 06:18 · JFK 09:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.