zoukankan      html  css  js  c++  java
  • 给大家推荐一款高大上的代码高亮插件(sublime,github风格)——highlight.js

       经常在一些大神博客里面看到非常好看的高亮代码,有sublime风格,GitHub风格等等。毫无疑问,好的高亮代码插件可以不仅仅让你的博文显得更高大上,更重要的是舒适的阅读体验。经过我在网上的一番搜罗,终于找到了一款非常赞的高亮插件,先来看看效果吧!

    1.Javascript 效果

    
    //检测URL
    function checkeUrl(url){
    	return new RegExp("^(https|http|ftp|rtsp|mms)://[-a-zA-Z0-9+&@#/%?=~_|!:,.;]*[-a-zA-Z0-9+&@#/%=~_|]", 'g').test(url);
    };
    
    //控制台打印
    window.console = window.console || {
    	log : function(){}
    }; 
    
    

    2.Java代码

    
    public interface UserDao {
        
        /**
         * 
         * 根据用户对象检索用户信息
         * @param user
         * @return User
         * @see [类、类#方法、类#成员]
         */
        public User getUser(User user);
        
        /**
         * 更新用户信息
         * @param user
         * @return int
         */
        public int updateUser(User user);
    }
    
    

    更多高大上的效果,sublime,googlecode大家可以戳这里:http://highlightjs.org/static/test.html

    使用方法:

      准备工作:

        插件使用非常简单,只需要在你要使用插件的页面引入highlight.js.和相应代码风格的Css样式文件即可。例如我这里采用的风格为:

      Solarized - Dark,那么我引入了这个css样式文件:http://highlightjs.org/static/styles/solarized_dark.css

      页面显示端,看下面的实例代码:

    
    //在页面中添加初始化脚本
    <script>
      hljs.configure({tabReplace: '    '});
      hljs.initHighlightingOnLoad();
    </script>
    
    //需要高亮显示的代码需要用<pre><code class="language"></code></pre>标签括起来,
    //其中language为要显示代码是什么语言,例如要显示Java代码则是class="java",
    //html代码则是class="xml"
    <pre>
    	<code class="xml">
          //详细代码 </code> </pre>

    在博客园中使用:

      在博客后台设置中添加上JS脚本引用和初始化脚本,把要应用的代码风格css样式Copy到页面定制CSS代码中,保存。

      然后在每次写博文时,添加完代码后,切换为HTML编辑状态,把代码部分稍作修改,把原来的pre class去掉,然后在里面加上code标签以及code class即可。

    插件官网地址:http://highlightjs.org/

    赶紧去试试吧,小伙伴们!!

  • 相关阅读:
    centos7最小化安装无法tab补全
    rhcsa备战笔记
    idea springboot应用启动
    idea 导入Mapper错误报错设置
    idea 忽略显示文件
    maven 插件jetty/tomcat启动 web 应用
    maven jstl、jsp、servlet依赖
    maven 项目目录图与web 应用结构图对比
    maven 远程仓库、私服及镜像配置
    maven windows环境nexus3.0私服搭建
  • 原文地址:https://www.cnblogs.com/zivxiaowei/p/3665618.html
Copyright © 2011-2022 走看看