Prism 标记

Prism 会识别代码中的标记,然后再使用 CSS 设置样式以生成语法高亮显示。此页面将概括介绍标准标记和相应的示例。

标准标记

在定义新语言时,您需要为每种“类型”的代码提供标记名称,例如关键字和运算符,以便 Prism 主题可以相应地分配颜色(和其他样式)。Prism 主题(官方和非官方)只会保证对这些标准标记的覆盖,因此,建议利用以下标准标记,以确保代码会高亮显示。

通用
关键字 预定义且保留的字词。
for (const foo of bar) {
	if (foo === 'foobar') break;
	await foo;
}
内建 开箱即用的函数/方法/类/类型。
pi = round(float('3.14159'), 2)
type SearchFunc = (source: string, subStr: string) => boolean;
类名 类、接口、特质或类型的名称。
class Rectangle extends Square { /* ... */ }
public class CameraController : MonoBehaviour { /* ... */ }
函数 函数或方法的名称。
function isEven(number) {
	return Number(number) % 2 === 0;
}
const isOdd = (number) => !isEven(number);
布尔值 True 和 false,以及类似概念(例如 yes 和 no)成对使用。
console.log(true === false); // prints false
console.log(true === !false); // prints true
数字 数字值,无论进制和顺序,以及无论实数或虚数。
print(3.14159 * 42)
print(1e100 + .001j)
return foo & 0xdeadbeef
字符串 文字,包括数字和符号,甚至可能是更多的特殊字符。
let greeting = 'Hello World!';
字符 该语言强制要求只能包含单个字符的字符串。
['A', 'z', '0', '-', '\t', '\u{2728}']
符号 一些语言中的原始数据类型,可被认为是标识符。
#myFirstSymbol "#myFirstSymbol is a symbol in Smalltalk"
正则表达式 正则表达式。
let entity = /&#x?[\da-f]{1,8};/;
网址 指向其他页面或资源的链接。
body {
	background: url(foo.png);
}
[Prism](https://prism.npmjs.net.cn) is a cool syntax highlighter.
运算符 表示动作或过程的符号,无论它是数学运算、逻辑运算等等。
x += (y + 4 >> -z === w) ? b ** c : ~a;
变量 变量的名称。此标记旨在谨慎使用。它通常用于特殊变量(例如,Less 或 Bash),不用于命令式和过程化编程语言中的一般变量(例如,C、JavaScript、Python)。
@nice-blue: #5B83AD;
@light-blue: lighten(@nice-blue, 20%);
echo $STRING
args=("$@")
echo ${args[0]} ${args[1]} ${args[2]}
常量 常量的名称。
const PI = 3.14159;
const THING: u32 = 0xABAD1DEA;
fprintf(stdout, "hello world\n");
属性 对象的属性/特征或映射键。
body {
	color: red;
	line-height: normal;
}
{
	"data": { "labels": ["foo", "bar"], },
	"error": null,
	"status": "Ok"
}
标点符号 标点符号,例如括号、圆括号、逗号等等。
def median(pool):
	copy = sorted(pool)
	size = len(copy)
	if size % 2 == 1:
		return copy[(size - 1) / 2]
	else:
		return (copy[size/2 - 1] + copy[size/2]) / 2
重要 任何重要且需要特别高亮显示的内容。
body {
	color: red !important;
}
# This is a heading. Headings are important.
注释 代码注释。
<!-- Here's a comment -->
<style>
	/* Here's another comment */
</style>
<script>
// Here's yet another comment
</script>
标记语言
标记 标记标记(例如,HTML 和 XML 标记)。
<p>Hello World!</p>
属性-名称属性-值 有点像标记标记的属性及其值/参数。
<p id="greeting">Hello World!</p>
<video width="1280" height="720" allowfullscreen controls>
	<source src="hello_world.mp4" type="video/mp4" />
</video>
名称空间 用于在 XML 文档中提供唯一命名的元素和属性。在标记语言之外,它用于标记标识符的包/名称空间部分。
<html:p foo:bar="baz" foo:weee></html:p>
class Foo extends foo.bar.Foo {
	java.util.List<foo.bar.Foo.Bar> bar(foo.bar.Baz bat) {
		throw new java.lang.UnsupportedOperationException();
	}
}
use std::sync::Arc;
序言 XML 文档的第一部分。
<?xml version="1.0" encoding="utf-8"?>
<svg></svg>
文档类型 文档类型声明,特定于标记语言。
<!DOCTYPE html>
<html></html>
CDATA 字符数据,特定于标记语言。
<ns1:description><![CDATA[
  CDATA is <not> magical.
]]></ns1:description>
实体 在标记语言中显示保留字符使用的代码。
&amp; &#x2665; &#160; &#x152;
文档标记语言
粗体 粗体文本。主要出现在文档标记语言中。
**I am bolded text!**
斜体 文本以斜体显示。在文档标记语言中很常见。
*I am italicised text!*
样式表
atrule 样式表中使用 @ 规则(语句)。
@font-family {
	font-family: Questrial;
	src: url(questrial.otf);
}
@media screen and (min-width: 768px) { /* ... */ }
选择器 用于识别或从组中选择操作对向的代码,例如样式表中 HTML 元素的名称。
section h1,
#features li strong,
header h2,
footer p { /* ... */ }
Diff
inserteddeleted 添加或修改行和删除行,主要用于差异比较。总体而言,也表示某种内容分别增加和减少/移除。
--- bar.yml	2014-12-16 11:43:41 +0800
+++ /Users/foo/Desktop/bar.yml	2014-12-31 11:28:08 +0800
@@ -4,5 +4,5 @@
project:
	sources: "src/*.cpp"
	headers: "src/*.h"
-    qt: core
+    qt: core gui
public_headers: "src/*.h"

嵌入语言

除以上标准标记外,Prism 还有一种标记,用于标记嵌入到其他语言中的语言,比如 HTML 中的 CSS、HTML 中的 JS、Shell 会话中的 Bash 和 JS 中的 CSS,这样 Prism 的主题可以更加准确地突出嵌入语言中的标记。所有嵌入语言均用其自己的特殊标记包装,其中包含一个 CSS 类 language-xxxx,该类对应于嵌入语言。

打开浏览器的开发者工具并查看下面的示例以实时观察!

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>I can haz embedded CSS and JS</title>
	<style>
		@media print {
			p { color: red !important; }
		}
	</style>
</head>
<body>
	<h1>I can haz embedded CSS and JS</h1>
	<script>
	if (true) {
		console.log('foo');
	}
	</script>

</body>
</html>

非标准标记

有时,一种语言可能会使用特定名称表示特定代码片段,但该名称并非 Prism 的标准标记名称,比如 function-defintion。由于 function-definition 不是标准标记,因此可以把它用语义类似的标准标记(比如 function)别名,这样可确保 Prism 的主题突出显示它。请看下面的示例

fn main() {
	println!("Hello World");
	another_function();
}