SyntaxHighlighter 代码高亮极简单配置

Posted 2021-02-02 wnpursue

页首html代码：

<!--<link type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/WNpursue/shCoreRDark.css"/>-->
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/WNpursue/shCore.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/WNpursue/shAutoloader.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/WNpursue/shBrushCSharp.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/WNpursue/shBrushCss.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/WNpursue/shBrushJScript.js"></script>
<!--代码高亮-->

页脚Html代码:

<script type="text/javascript">
    SyntaxHighlighter.all(); //代码高亮
  </script>

所有插入代码放入对应便签中 以下中：(所有 ‘<‘ 都用VSCode 替换成 ‘&lt;’  否则 <script>等片段会被浏览器识别成标签)

(CSharp =>C#,  Css => css , JScript => javascript )
<div class="Highlighter">
<pre class="brush:javascript;gutter:true;">
     SyntaxHighlighter.all(); //代码高亮这一步需要放在最后
<pre>
</div>

<div class="Highlighter">
<pre class="brush:csharp;gutter:true;">
public String Get()
｛
    var a = "Hello World";
    return a;
｝
<pre>
</div>

<div class="Highlighter">
<pre class="brush:css;gutter:true;">
.css{
   css:css,
   css:css,
}
<pre>
</div>