zoukankan      html  css  js  c++  java
  • 代码高亮显示插件——dp.SyntaxHighlighter的使用

    最近经常用看各种论坛,博客,看到一种新的代码显示插件,感觉挺方便,好用的,特拿来与大家分享一下。

    下面是这种插件的截图,大家也许也见了不少:

    这种插件不仅让代码的展示变得美观了许多,并且还给喜欢自己代码的朋友提供的方便。以前我们看到的网上

    的代码片断一般是直接将各种开发环境中的代码直接拷过来的,所以如果你直接在页面上复制的话,它是不能

    直接使用的。现在使用这个插件,我们可以直接拷贝了,并且可以直接使用了。心动了吧,想不想现在就拥有

    下面我们就来说说这个插件具体怎么使用吧。其实很简单的:

    先将我们的要先下载这个插件:http://download.csdn.net/detail/lyq1371964/5311123

    然后将解压:将script、src、style、三个文件夹引入你的项目中

    然后新建html/jsp等页面

    在页面中插入如下代码:

     <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushBash.js"></script>
     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCpp.js"></script>
     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCSharp.js"></script>
     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script>
     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushDelphi.js"></script>
     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushDiff.js"></script>
     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushGroovy.js"></script>
     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJava.js"></script>
     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPhp.js"></script>
     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPlain.js"></script>
     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPython.js"></script>
     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushRuby.js"></script>
     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushScala.js"></script>
     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushSql.js"></script>
     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushVb.js"></script>
     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script>
     <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCore.css"/>
     <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemeDefault.css"/>
     <script type="text/javascript">
      SyntaxHighlighter.config.clipboardSwf = 'syntaxhighlighter/scripts/clipboard.swf';
      SyntaxHighlighter.all();
     </script>

    再将你要显示的代码放到pre标签中,代码示例如下:

     <pre class=" c-sharp;">
     function getName():string
     {
      return "lili";
     }
    </pre>

    好了,现在你以运行你的项目了

  • 相关阅读:
    大并发服务器框架设计
    Flask框架(五) —— session源码分析
    Flask框架(三)—— 请求扩展、中间件、蓝图、session源码分析
    Flask框架(二)—— 反向解析、配置信息、路由系统、模板、请求响应、闪现、session
    Flask框架(一)—— Flask简介
    celery执行异步任务和定时任务
    爬虫(五)—— selenium模块启动浏览器自动化测试
    爬虫(四)—— 使用pyecharts展示数据
    爬虫(三)—— BeautifulSoup模块获取元素
    数据库(三)—— 数据库存储引擎、日志、备份、主从复制、高可用架构
  • 原文地址:https://www.cnblogs.com/liuyq/p/3049047.html
Copyright © 2011-2022 走看看