<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<title>页面代码高亮显示</title>

<link rel=”stylesheet” href=”/js/highlight/styles/default.css”>

<script src=”/js/highlight/highlight.pack.js”></script>

<script>hljs.initHighlightingOnLoad();</script>

</head>

<body>

<h1>页面代码高亮显示</h1>

<h2>

<a href=”https://highlightjs.org/download/” target=”_blank”>1·    Highlight.js 下载地址</a><br/>

<a href=”https://highlightjs.org/usage/” target=”_blank”>2·    Highlight.js 在线文档</a><br/>

<a href=”http://highlightjs.readthedocs.org/en/latest/css-classes-reference.html” target=”_blank”>3·    Highlight.js class类别对应表</a><br/>

</h2>

<h3>引用插件包所支持的语言类型:</h3>

<img src=”/image/highlight.png” alt=”引用插件包所支持的语言类型”/>

<br/>

<h3>JSON 数据格式:</h3>

<pre><code class=”json”>

{

“action”:”DescribeInstancesResponse”,

“instance_set”:[

{

“vcpus_current”:1,

“instance_id”:”i-ogbndull”,

“volume_ids”:[

“vol-g7xy7d6g”,

“vol-jg7326gy”

],

“vxnets”:[

{

“vxnet_name”:”primary vxnet”,

“vxnet_type”:1,

“vxnet_id”:”vxnet-0″,

“nic_id”:”52:54:ef:0c:ed:66″,

“private_ip”:”10.50.13.54″

}

]

}

</code>

<h3>css 数据格式:</h3>

<code class=”css”>

.hidden{ display:hidden ;}

</code>

<h3>php 数据格式:</h3>

<code class=”php”>

for($i = 0 ; $i<10 ; $i++){

echo “hello world!” ;

}

</code>

<h3>SQL 数据格式:</h3>

<code class=”sql”>

select * from test where t_id = 1;

</code>

<h3>http 协议:</h3>

<code class=”http”>

https://api.qingcloud.com/iaas/?action=RunInstances

&vxnets.1=vxnet-0

&instance_type=small_a

&image_id=centos63x64

&COMMON_PARAMS

</code>

<h3>代码禁止高亮:</h3>

<code class=”nohighlight”>

select * from test where t_id = 2;

</code>

</body>

</html>

html中代码高亮显示的更多相关文章

  1. 在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示

    在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...

  2. ngui中 代码调用按钮事件(后来改成了按钮绑定键盘..)

    ngui中 代码调用按钮事件 好烦人啊这个问题, 我弄完发上来 这个问题解决了一半 发现可以用 按钮绑定来解决这个问题,并且更安全方便快速 直接在按钮上添加一个 key binding 指定按键 搞定 ...

  3. Html中代码换行造成空格间距的问题

    Html中代码换行造成空格间距的问题解析 解决方法: 一.简单粗爆不换行 写代码的时候不要换行,input等在一行输写,那么将解决该问题.但是代码就变得不再那么容易好看. 二.设置父级块的字体大小为0 ...

  4. 改变Eclipse 中代码字体大小

    1.改变eclipse 中代码字体大小,就是我打进去的java文件的字体大小 wiondow--preferences--general--appearance--colors and fonts-- ...

  5. Eclipse中代码自动提示功能设置

    Eclipse中代码自动提示功能设置 1 打开eclipse→Windows→Preferences→Java→Editor→Content Assist: 修改Auto Activation tri ...

  6. Java中代码点与代码单元（转）

    摘要 本文介绍 Java 平台支持增补字符的方式.增补字符是 Unicode 标准中代码点超出 U+FFFF 的字符,因此它们无法在 Java 编程语言中描述为单个的 16 位实体(例如char数据类 ...

  7. css中代码格式以及@import的语法结构

    CSS中代码格式 CSS是Cascading Style Sheets(层叠样式表)的缩写.是一种对web文档添加样式的简单机制,属于表现层的布局语言. 1.基本语法规范分析一个典型CSS的语句: p ...

  8. abap编辑器中代码不可修改

    当出现abap编辑器中代码不能修改的情况,可以按如下设置: edit——> 修改操作——>关闭助手

  9. 【原】Mac下统计任意文件夹中代码行数的工

    [链接][原]Mac下统计任意文件夹中代码行数的工http://www.cnblogs.com/wengzilin/p/4580646.html

随机推荐

  1. 缓存篇(Cache)~第一回　使用static静态成员实现服务器端缓存(导航面包屑)

    返回目录 今天写缓存篇的第一篇文章,在写完目录后,得到了一些朋友的关注,这给我之后的写作带来了无穷的力量,在这里,感谢那几位伙伴,哈哈! 书归正传,今天我带来一个Static静态成员的缓存,其实它也不 ...

  2. display的理解

    display可把框内显示的内容改变(自我理解) none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有 ...

  3. atitit..代码生成流程图 流程图绘制解决方案 java  c#.net  php v2

    atitit..代码生成流程图 流程图绘制解决方案 java  c#.net  php v2 1.1. Markdown 推荐,就是代码和flow都不能直接使用.1 1.2. Java code2fl ...

  4. 1.1.1. Atitit Cocos2d-JS v3.x的问题

    1.1.1. Atitit Cocos2d-JS v3.x的问题   1.1. Api 兼容性 场景切换的api都不兼容了...  删除了比较多的api...可以dep啊.. 1.2. gui布局,, ...

  5. 每天一个linux命令（34）：du 命令

    Linux du命令也是查看使用空间的,但是与df命令不同的是Linux du命令是对文件和目录磁盘使用的空间的查看,还是和df命令有一些区别的. 1．命令格式: du [选项][文件] 2．命令功能 ...

  6. 【SQL】姗姗来迟的SQL Server 安装图解

     逆天今天被人拉过去装了个数据库...顺便就记录一下安装过程吧,一直想发一直没时间弄,今天就发下安装过程吧,2012和2008安装过程一样的 [注意安装细节]         安装过程中如果出现问题参 ...

  7. 冒泡排序java代码

    冒泡排序就是依次取出最大数,然后依次交换放到数组最后边. 直观写法: public long[] sort(long[] a){ int n = a.length - 1; // Step:1 选出最 ...

  8. Advice for students of machine learning--转

    原文地址:http://www.mimno.org/articles/ml-learn/ written by david mimno One of my students recently aske ...

  9. Android基于mAppWidget实现手绘地图（十六）–处理一次触摸多个地图对象

    最好的处理方式就是弹出一个对话框,将用户触摸过的控件罗列出来.你可以通过实现OnMapTouchListener来处理. 参考以下代码,实现上述功能: mapWidget.setOnMapTouchL ...

  10. Spark入门实战系列--7.Spark Streaming（上）--实时流计算Spark Streaming原理介绍

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .Spark Streaming简介 1.1 概述 Spark Streaming 是Spa ...