html中代码高亮显示

时间:2023-01-29 21:12:27
<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中 代码调用按钮事件&lpar;后来改成了按钮绑定键盘&period;&period;&rpar;

    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中代码格式以及&commat;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. 移动端meta

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scal ...

  2. codeforces 702E Analysis of Pathes in Functional Graph 倍增

    题目链接 给一个图, 然后给出每条边的权值和一个k值. 让你求出从每个点出发, 走k次能获得的边权的和以及边权的最小值. 用倍增的思想, 求出每个点走一次能到达的点, 权值和以及最小值, 走两次..四 ...

  3. 十四、Hadoop学习笔记————Zookeeper概述与基本概念

    顺序一致性:严格按照顺序在zookeeper上执行 原子性:所有事物请求的结果,在整个集群的应用情况一致 单一视图:无论从哪个服务器进入集群,看到的东西都是一致的 可靠性:服务端成功响应后,状态会 一 ...

  4. &period;net Core 调用微信Jsapi接口,H5解析二维码

    项目里需要用到扫描二维码,自己实现,不会. 找到了两种解决方案: 通过reqrcode.js,这是一个前端解析二维码内容的js库.如果二维码比较清晰,用这种效果也不错 调用微信扫一扫功能,这种效果很好 ...

  5. Mac下安装pyenv

    mac 用virtualenv安装py3.6的虚拟环境报错(virtualenv -p /usr/bin/python3 env36), 解决的话需要安装zlib包, 然后去掉configure配置里 ...

  6. mysql 案例 ~ pt修复工具的使用

    简介:今天咱们来聊聊PT修复工具pt-table-sync 注意事项:   1 表要有主键或者唯一键   2 针对每一个chunk加的是for update锁   3 修复过程中不能容忍从库延迟 如果 ...

  7. 算法:插入排序(Insertion Sort)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  8. 洛谷4578 &amp&semi; LOJ2520:&lbrack;FJOI2018&rsqb;所罗门王的宝藏——题解

    https://www.luogu.org/problemnew/show/P4578 https://loj.ac/problem/2520 有点水的. 先转换成图论模型,即每个绿宝石,横坐标向纵坐 ...

  9. ios --跳转到支付宝

    //跳转到支付宝 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request nav ...

  10. DAY16-Django之model

    Object Relational Mapping(ORM) ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据 ...