代码高亮

入门

采用了highlight.js代码高亮库. QPF对其接口进行了便利性封装.

在需要渲染代码的html页面引入必须的js与css文件.

<link rel="stylesheet" href="qpf-ui/lib/code/highlight.css">
<script src="qpf-ui/lib/code/highlight.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

执行hljs.initHighlightingOnLoad();代码高亮附加到页面加载事件, 这将找到并突出显示<pre><code>标签内的代码; 它试图自动检测语言。如果自动检测不起作用,您可以在class属性中指定语言:

<pre><code class="html">...</code></pre>
<pre><code class="nohighlight">...</code></pre>

当前库已内置的代码类型(html,css,php,sql,javascript(js),xml,json), 指定nohighlight代码将不渲染. 更多语言标识类. 类名也可以与自定义前缀language-或 lang-来防止冲突, js是通过匹配`*-html`的方式来获取代码语言. 与高亮css样式类没有仍和关系。

自定义初始化

highlightBlock(block)渲染指定dom节点. configure(options)配置全局选项

可配置项目
//tabReplace : (string)用于替换缩进中的TAB字符的字符串
//useBR : (bool) 用于在输出中生成<br>标签而不是换行符号的标志,在使用非<pre>容器标记代码时非常有用。
//classPrefix : (string) 在生成的标记中的类名之前添加的字符串前缀,用于向后兼容样式表。
//languages : 一组语言名称和别名,限制自动检测仅限于这些语言。

hljs.configure({
	tabReplace:'',// 4个空格
  classPrefix:'' //不附加类前缀
                      // ...其他选项不会更改
})
hljs.initHighlighting(); // 需知需要在渲染前设定

以下代码是用jquer遍历的将页面所有pre标签进行渲染.

$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

您可以使用任何标签而不是<pre><code>来作为容器, 如果您不使用保留换行符的容器,则需要配置使用该<br>标记

<?php
echo "Hello World!";
?>

html

function view_codeH(){
	hljs.configure({useBR: false});

	$('p.codeH').each(function(i, block) {
	  hljs.highlightBlock(block);
	});
}
					

代码高亮

第一步: 载入css和js资源

<link rel="stylesheet" href="qpf-ui/lib/code/highlighting.css" />
<script src="qpf-ui/lib/code/highlight.js"></script>

第二步: 页面添加高亮代码 <code><pre><code>...</code></pre>

<pre><code class="html">...</code></pre> //在class="html" 可手动指定代码类型(html,css,php,sql,javascript,xml,json), 不填写会自动检查 
<pre><code class="nohighlight">...</code></pre> // 不使用代码高亮
				

第三步: 驱动js渲染代码

// 原生api
<script>hljs.initHighlightingOnLoad();</script>
// jquery
$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});
				

qpf.code.js 动态载入

通过js命令快速部署.

qpf.code.init(); 载入代码高亮所需的css和js资源. 该方法只能执行一次. 所有的方法只能在初始化后执行.

qpf.code.init('all'); 载入成功后, 直接渲染所有的pre + code标签组合中的代码.

qpf.code.view(e); 渲染指定元素中的代码, 未传值代表默认渲染所有的pre + code标签组合中的代码.




#pre-code
@font-face { font-family: Chunkfive; src: url('Chunkfive.otf'); }
body, .usertext { color: #F0F0F0; background: #600; font-family: Chunkfive, sans; }


body {}
#id {}
.class{}
div.class{
	color:#ff0000;
}
p#first-line:first-line{
	color:#ff0000;
}
@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}
				
下面的不会被渲染.nohighlight


@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}
				

pre 预格式化的文本

pre标签允许其中的空格真正显示出来。例如:四个空格将真实显示成四个空格。其他标签将空白压缩成一个.

code标签的语义表示其中的文本是代码。

<pre><code>
function cool(x) {
  return x + 1;
}</code></pre>

css属性white-space: pre-wrap;是让pre实现保留空白同时折行. 不想折行使用overflow-x: auto;水平滚动条. 需要考虑max-height指定最大高度;

QPF中定义pre标签默认换行.

.pre-maxheight可限制pre的高度, 超出自动显示垂直滚动条. 别名.pre-scrollable

pre默认css qpf中的css
display: block;/*可设置边框*/
font-family: monospace; /*等宽字体*/
white-space: pre;/*空白的处理*/
margin: 1em 0px;
			        
margin: 0 0 10px;
padding: 9.5px;
border: 1px solid #dedede;
border-radius: 0;
background-color: #f8f8f8;
color: #555555;
			        

pre 保持默认的容器宽度,但是允许它在交互的时候展开

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta content="description" name="QPF-UI是QPF框架的视图支持组件.一些人,可能包括你,既不喜欢折行也不喜欢滚动条。这种情况也有解决方案。你可以让 pre保持默认的容器宽度,但是允许它在交互的时候展开">
					
html
pre:hover,
pre:focus {
  width: min-content;
}
			        

qpf中默认的pre效果:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta content="description" name="QPF-UI是QPF框架的视图支持组件.一些人,可能包括你,既不喜欢折行也不喜欢滚动条。这种情况也有解决方案。你可以让 pre保持默认的容器宽度,但是允许它在交互的时候展开">
					
white-space
white-space的值:
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的标签。
nowrap	文本不会换行,文本会在在同一行上继续,直到遇到标签为止。
pre-wrap	保留空白符序列,但是正常地进行换行。
pre-line	合并空白符序列,但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。
			        

如果你使用 tab 来缩进,你可能会觉得缩进太宽了。默认情况下,tab 被按照 8 个空格来渲染,这很荒唐。

pre {
  tab-width: 4;
}