highlight.js两种不同肤色代码高亮演示【原创

来源:https://www.sucaihuo.com/js/1701.html 2017-04-12 07:23浏览(1731) 收藏

highlight.js支持多种常用编程语言,包括 C语言、java、javascript、ruby、python、html、css、PHP等
highlight.js两种不同肤色代码高亮演示
分类:其它特效 > jQuery插件 难易:中级
查看演示 下载资源 下载积分: 60 积分

light皮肤

<link class="codestyle" charset="utf-8" rel="stylesheet" href="highlight/css/tomorrow.css"/>
<script src="highlight/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<h2>CSS代码高亮</h2>
<pre>
    <code class="hljs css">
@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}

body, .usertext {
  color: #F0F0F0; background: #600;
  font-family: Chunkfive, sans;
}

@import url(print.css);
@media print {
  a[href^=http]::after {
    content: attr(href)
  }
}
    </code>
</pre>
<h2>JS代码高亮</h2>
<pre>
     <code class="hljs javascript">
var _hmt = _hmt || [];
(function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?b5ae3f71dfe5f06a9dd4dc55087f27d1";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s)
})();
    </code>
</pre>

dark皮肤

<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<pre>
<code class="hljs css">
    @font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}

body, .usertext {
  color: #F0F0F0; background: #600;
  font-family: Chunkfive, sans;
}

@import url(print.css);
@media print {
  a[href^=http]::after {
    content: attr(href)
  }
}
    </code>
</pre>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/1701.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2