zoukankan      html  css  js  c++  java
  • 一个不错的源代码语法高亮插件dp.SyntaxHighlighter

    dp.SyntaxHighlighter是一个不错的源代码语法高亮插件,用于你的页面中通过js来动态实现语法高亮显示你的源代码。
    使用js脚本来动态进行代码着色的一个明显的好处在于:不会对原始的代码进行修改,保证原始代码的正确性(基本上所有的通过语法解析然后对字符串添加<span></span>来进行着色的话或多或少会产生解析错误,并且增加文件大小)。但同时执行效率将有赖于客户端机器的性能。目前此脚本支持的语言类型包括:

    c#, c-sharp, csharp
    vb, vb.net
    delphi, pascal
    js, jscript, javascript
    php
    py, python
    sql
    xml, xhtml, xslt, html, xhtml
    < src="plug-ins/SyntaxHighlighter/shCore.js">

    使用方法简介:

    1. 把你需要进行代码高亮的源代码部分放置在特定的textarea中。

    < src="plug-ins/SyntaxHighlighter/shBrushJScript.js">

    复制代码 代码如下:

    <textarea name="code" class="JScript" cols="60" rows="10">
    ... 在这里放置你需要放置的代码。class表示你这段代码的类型 ...
    </textarea>

    2. 在所有textarea之后放置以下代码。

    < src="plug-ins/SyntaxHighlighter/shBrushXml.js">

    复制代码 代码如下:

    <link type="text/css" rel="stylesheet" href="SyntaxHighlighter.css" mce_href="SyntaxHighlighter.css"></link>
    <mce:script language="javascript" src="Scripts/shCore.js" mce_src="Scripts/shCore.js"></mce:script>
    <!--这些根据你实际在页面用到了哪些类型的源代码着色来引用-->
    <mce:script language="javascript" src="Scripts/shBrushXml.js" mce_src="Scripts/shBrushXml.js"></mce:script>
    <!--这是实际起作用的最终执行脚本触发-->
    <mce:script language="javascript"><!--
    // 对所有name=code的textarea内容进行处理。
    dp.SyntaxHighlighter.HighlightAll('code');
    // --></mce:script>

    < type="text/javascript">

    添加之后的效果正如本文的代码演示。

    缺省情况下代码显示区域宽度为100%,即充满整个区域。如果需要固定显示区域的宽度(可以防止单行代码过长撑破页面布局),可以修改SyntaxHighlighter.css样式文件中的 .dp-highlighter 样式的宽度,把100%改为你想要的px数值即可。

  • 相关阅读:
    TestNG系列(四)TestNG监听器
    SpringBoot中Conditional的条件
    TCP的四次挥手与三次握手
    [Lamada] lamda流操作
    [Spring] 封装request 自定义添加parameter
    AES加密Demo
    [转]数据库软件架构,到底要设计些什么
    [正则表达式]
    [mysql] 查询配置文件读取位置和顺序
    [MySQL]错误日志
  • 原文地址:https://www.cnblogs.com/gredswsh/p/1826931.html
Copyright © 2011-2022 走看看