html中引入高亮代码

html页面中引入高亮代码

效果

网上有很多有关相关的JS库

vue引入

// An highlighted block
// vue 引入
<textarea name="code" class="c++" id="code"  >
  
</textarea>
// name class 属性必须与上一致
import '@/assets/codePre/SyntaxHighlighter.css'
import dp from '@/assets/codePre/shCore.js'


dp.SyntaxHighlighter.HighlightAll('code', true,false);

方法在mounted中调用，因为需要操作dom,name class 属性必须与上述代码一致或者在js文件中更改

普通引入

// An highlighted block
<link type="text/css"rel="stylesheet"href="./SyntaxHighlighter.css"></link>
<textarea name="code" class="c++" id="code"  >

</textarea>
// name class 属性必须与上一致


<script l src="./shCore.js"></script>


dp.SyntaxHighlighter.HighlightAll('code', true,false);

相关网站

http://www.planetb.ca/projects/syntaxHighlighter/.