JS 代码高亮加复制代码

最新推荐文章于 2024-06-06 11:39:39 发布

iteye_17658

最新推荐文章于 2024-06-06 11:39:39 发布

阅读量389

点赞数

分类专栏：境-JS 文章标签： JS 代码高亮加复制代码 JS 代码高亮

境-JS 专栏收录该内容

197 篇文章 1 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJava.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/shBrushRuby.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushSql.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>
</head>
<body>
<pre class="brush:html;">
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no&quot;&gt;
&lt;title&gt;新建H5模板&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
    body{ font-family:\5FAE\8F6F\96C5\9ED1,&#39;Arial&#39;; color:#5b5b5b; background-color:#fff; font-size:14px; overflow-x:hidden;}
    a{ color:#333; text-decoration:none;}
    a:hover{ color:#333; text-decoration:none;}
    img{ border:none;}
    i,em{ font-style:normal;}
    li{ list-style-type:none;}
    textarea{ resize:vertical;}
    input, select, textarea{ font-family:\5FAE\8F6F\96C5\9ED1,&#39;Arial&#39;; background-color:#fff margin:0; padding:0; outline:none;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h3&gt;阅谁问君诵，水落清香浮&lt;/h3&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        alert(&quot;测试吧&quot;);
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
</body>
</html>

效果图：

PS：可以把如下的JS整合成一条JS，再压缩就可以减少响应量和文件大小，加快页面的访问速度。

<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJava.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/shBrushRuby.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushSql.js"></script>