Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
易企天创
zui
提交
3244a245
Z
zui
项目概览
易企天创
/
zui
大约 1 年 前同步成功
通知
6
Star
0
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
37
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Z
zui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
37
Issue
37
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
3244a245
编写于
8月 19, 2016
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
* update code document.
上级
5b3a2059
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
48 addition
and
4 deletion
+48
-4
docs/part/component-code.html
docs/part/component-code.html
+48
-4
未找到文件。
docs/part/component-code.html
浏览文件 @
3244a245
...
...
@@ -4,6 +4,12 @@
<div
class=
"example"
contenteditable=
"true"
>
<p>
通过
<code>
<
code
>
</code>
标签内嵌一小段代码。
</p>
</div>
<pre>
<
code
>&
lt;code
&
gt;
<
/code
>
</pre>
<p>
通过
<code>
.code
</code>
来为任何内容应用与代码相同的等宽字体。
</p>
<div
class=
"example code"
contenteditable=
"true"
>
<h1
class=
"code"
>
HelloCode();
</h1>
</div>
<pre>
<
h1 class=
"
<em>
code
</em>
">
HelloCode();
<
/h1
>
</pre>
</article>
</section>
...
...
@@ -14,6 +20,7 @@
<div
class=
"example"
contenteditable=
"true"
>
<p>
按
<kbd>
Ctrl
</kbd>
+
<kbd>
C
</kbd>
来复制示例代码,按
<kbd>
Ctrl + V
</kbd>
来粘贴代码。
</p>
</div>
<pre>
按
<
kbd
>
Ctrl
<
/kbd
>
+
<
kbd
>
C
<
/kbd
>
来复制示例代码,按
<
kbd
>
Ctrl + V
<
/kbd
>
来粘贴代码。
</pre>
</article>
</section>
...
...
@@ -24,8 +31,38 @@
<div
class=
"example"
contenteditable=
"true"
>
<pre><code>
<
p
>
Hello world!
<
/p
>
</code></pre>
</div>
<pre>
<
pre
><
code
>&
lt;p
&
gt;Hello world!
&
lt;/p
&
gt;
<
/code
><
/pre
>
</pre>
<p>
还可以使用
<code>
.pre-scrollable
</code>
class,其作用是设置max-height为350px,并在垂直方向展示滚动条。
</p>
class,其作用是设置
<code>
max-height
</code>
为
<code>
350px
</code>
,并在垂直方向展示滚动条。
</p>
<div
class=
"example"
contenteditable=
"true"
>
<pre
class=
"pre-scrollable"
><code>
// 这是一段较长的代码
// 用来演示 .pre-scrollable
// 当代码行数超出时会出现垂直滚动条
// ============================================================================================================
function test() {
var x = 1;
var y = 2;
var z1 = x*x + 2*x + 1;
var z2 = y*y + 2*y + 1;
var z = z1*z1 + z2*z2;
var o = z*z + 2*z + 1;
var p = (o/2 - z*z + 1)/o;
var q = (o + p)/z;
console.log(x);
console.log(y);
console.log(z);
console.log(q);
}
test();
</code></pre>
</div>
<pre>
<
pre class=
"
pre-scrollable
">
...
<
/pre
>
</pre>
</article>
</section>
...
...
@@ -34,9 +71,9 @@
<article>
<p>
代码高亮是通过根据代码语言语法给代码中的单词、字符标记为不同颜色来显示的方法。代码高亮能大大提高代码的查阅体验。在web界面加上代码高亮非常容易,在产品中如需要向用户展现代码应该使用代码高亮。
</p>
<p>
这里推荐的方案是
<a
href=
"https://code.google.com/p/google-code-prettify/
"
target=
"_blank"
>
Google Code Prettify
</a>
实现代码高亮。Google Code Prettify能够自动识别代码语言类型并正确应用语法高亮。
</p>
<p>
下面是一个
php
文件的示例:
</p>
<p>
这里推荐的方案是
<a
href=
"https://github.com/google/code-prettify
"
target=
"_blank"
>
Google Code Prettify
</a>
实现代码高亮。Google Code Prettify能够自动识别代码语言类型并正确应用语法高亮。
</p>
<p>
下面是一个
php
文件的示例:
</p>
<div
class=
"example"
contenteditable=
"true"
>
<pre
class=
"prettyprint linenums"
><code>
<
!doctype html
>
<
html lang=
"
en
">
...
...
@@ -50,6 +87,13 @@
<
/body
>
<
/html
>
</code></pre>
</div>
<pre>
<
!--
为
pre
增加
prettyprint CLASS --
>
<
pre class=
"
prettyprint linenums
">
...
<
/pre
>
</pre>
<pre>
// 页面导入 prettify.js 后调用 window.prettyPrint 方法来初始化代码高亮效果
window.prettyPrint();
</pre>
</article>
</section>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录