Prism 标记

Prism 会识别代码中的标记,然后由 CSS 设置为该标记的样式,以产生语法高亮。此页面概述了标准标记和相应的示例。

标准标记

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

通用
keyword 预定义和保留字。
for (const foo of bar) {
	if (foo === 'foobar') break;
	await foo;
}
builtin 开箱即用的函数/方法/类/类型。
pi = round(float('3.14159'), 2)
type SearchFunc = (source: string, subStr: string) => boolean;
class-name 类、接口、特征或类型的名称。
class Rectangle extends Square { /* ... */ }
public class CameraController : MonoBehaviour { /* ... */ }
function 函数或方法的名称。
function isEven(number) {
	return Number(number) % 2 === 0;
}
const isOdd = (number) => !isEven(number);
boolean 真和假,以及与其类似的概念(例如是和否)。
console.log(true === false); // prints false
console.log(true === !false); // prints true
number 数值,无论底数和顺序如何,也无论实数还是虚数。
print(3.14159 * 42)
print(1e100 + .001j)
return foo & 0xdeadbeef
string 文本字面值,包括数字、符号甚至更多特殊字符。
let greeting = 'Hello World!';
char 根据语言规则,只能包含单个字符的字符串。
['A', 'z', '0', '-', '\t', '\u{2728}']
symbol 在某些语言中找到的基本数据类型,可以将其视为标识符。
#myFirstSymbol "#myFirstSymbol is a symbol in Smalltalk"
regex 正则表达式。
let entity = /&#x?[\da-f]{1,8};/;
url 指向另一个页面或资源的链接。
body {
	background: url(foo.png);
}
[Prism](https://prism.dev.org.tw) is a cool syntax highlighter.
operator 表示动作或过程的符号,无论是数学运算、逻辑运算等。
x += (y + 4 >> -z === w) ? b ** c : ~a;
variable 变量的名称。此标记旨在谨慎使用。它通常用于特殊变量(例如 Less 或 Bash),而不是命令式和过程式编程语言(例如 C、JavaScript、Python)中的常规变量。
@nice-blue: #5B83AD;
@light-blue: lighten(@nice-blue, 20%);
echo $STRING
args=("$@")
echo ${args[0]} ${args[1]} ${args[2]}
constant 常量的名称。
const PI = 3.14159;
const THING: u32 = 0xABAD1DEA;
fprintf(stdout, "hello world\n");
property 属性/特征或对象/映射键。
body {
	color: red;
	line-height: normal;
}
{
	"data": { "labels": ["foo", "bar"], },
	"error": null,
	"status": "Ok"
}
punctuation 标点符号,例如方括号、圆括号、逗号等。
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
important 任何重要且需要特殊高亮的。
body {
	color: red !important;
}
# This is a heading. Headings are important.
comment 代码注释。
<!-- Here's a comment -->
<style>
	/* Here's another comment */
</style>
<script>
// Here's yet another comment
</script>
标记语言
tag 标记标记(例如 HTML 和 XML 标记)。
<p>Hello World!</p>
attr-name, attr-value 类似于标记标记的属性及其值/参数。
<p id="greeting">Hello World!</p>
<video width="1280" height="720" allowfullscreen controls>
	<source src="hello_world.mp4" type="video/mp4" />
</video>
namespace 用于提供 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;
prolog XML 文档的第一部分。
<?xml version="1.0" encoding="utf-8"?>
<svg></svg>
doctype 文档类型声明,特定于标记语言。
<!DOCTYPE html>
<html></html>
cdata 字符数据,特定于标记语言。
<ns1:description><![CDATA[
  CDATA is <not> magical.
]]></ns1:description>
entity 用于在标记语言中显示保留字符的代码。
&amp; &#x2665; &#160; &#x152;
文档标记语言
bold 加粗文本。主要在文档标记语言中找到。
**I am bolded text!**
italic 斜体文本。主要在文档标记语言中找到。
*I am italicised text!*
样式表
atrule 样式表中的文字 @ 规则(语句)。
@font-family {
	font-family: Questrial;
	src: url(questrial.otf);
}
@media screen and (min-width: 768px) { /* ... */ }
selector 用于在组中识别或挑选某些对象进行操作的代码,例如样式表中 HTML 元素的名称。
section h1,
#features li strong,
header h2,
footer p { /* ... */ }
Diff
inserted, deleted 添加或修改的行以及删除的行,主要针对 diff。一般来说,还有增加和减少/删除的概念。
--- 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-session 中的 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();
}