博客中插入代码使其高亮 SyntaxHighlights

最新推荐文章于 2025-02-25 10:51:52 发布

原创最新推荐文章于 2025-02-25 10:51:52 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #class #stylesheet #styles #emacs #xml

Others 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种在网页上实现代码高亮显示的方法。主要包括下载必要的资源文件、解压并配置文件路径、在HTML中插入特定代码以及加载JavaScript脚本来实现不同编程语言的源代码着色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 下载

下载Google链接或者我的资源链接

2 使用

2.1 解压

假设网页文件test.htm存放在一个目录，解压后，复制其中的Scripts文件夹和styles文件夹，确保和test.html在同一个目录下面。

2.2 插入代码

2.2.1 head

在网页的<head></head>之间插入以下代码：

2.2.2 source

在网页要显示程序源代码的地方插入以下代码，若是HTML类型的话，用XML（其它的如class="js"表示以js语法显示源代码，其他可设定的class值分别为c#、css、c、elphi、java、js、php、python、ruby、sql、vb、xml）：

<textarea name="code" class="js" rows="15" cols="100">
程序源代码放在这儿
</textarea>

说明：
name="code"是必须的，不能更改；
class="xml"是着色的方式，即需要着色的代码的类型，根据需要进行更改。

2.2.3 body

在网页尾部的</body>之前插入以下代码：

       
        
         
          
           
            
             
              
               
                
                 
                  <script class="javascript" src="Scripts/shCore.js"></script> 
<script class="javascript" src="Scripts/shBrushCSharp.js"></script> 
<script class="javascript" src="Scripts/shBrushPhp.js"></script> 
<script class="javascript" src="Scripts/shBrushJScript.js"></script> 
<script class="javascript" src="Scripts/shBrushJava.js"></script> 
<script class="javascript" src="Scripts/shBrushVb.js"></script> 
<script class="javascript" src="Scripts/shBrushSql.js"></script> 
<script class="javascript" src="Scripts/shBrushXml.js"></script> 
<script class="javascript" src="Scripts/shBrushDelphi.js"></script> 
<script class="javascript" src="Scripts/shBrushPython.js"></script> 
<script class="javascript" src="Scripts/shBrushRuby.js"></script> 
<script class="javascript" src="Scripts/shBrushCss.js"></script> 
<script class="javascript" src="Scripts/shBrushCpp.js"></script> 
<script class="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>