代码高亮显示插件prismjs的使用

官网：https://prismjs.com/download.html

1、简单使用

html里面引入prism-all.css及prism-all.js

    
    
    
    
    


    
    
        
            public void haha() {
                String a = "b";
                System.out.println("haha");

            }
        
    

效果

2.vue项目使用

2.1cnpm安装插件

cnpm install prismjs -S
cnpm install babel-plugin-prismjs -D

2.2在.babelrc文件中配置

"plugins": ["transform-vue-jsx", "transform-runtime", //.babelrc文件中plugins选项里配置
    ["prismjs", {
      "languages": ["javascript", "css", "markup", "java", "html"],
      "plugins": ["line-numbers", "highlight-keywords"],
      "theme": "default",
      "css": true
    }]
  ],

languages:javascript, css, markup, java, html等

 

plugins:line-numbers, highlight-keywords等

 

theme:default，coy， dark， funky

2.3在组件中import进来

import Prism from 'prismjs'

如果需要渲染的文本是从后台读取的，需要手动执行Prism.highlightAll()，否则出不了效果。

2.4效果