ui: prism: 支持显示空白符

packages/ui-default/components/highlighter/highlighter.page.styl

@@ -120,3 +120,32 @@ pre > code
         display: block
         padding-right: 0.8em
         text-align: right
+
+.token.tab:not(:empty),
+.token.cr,
+.token.lf,
+.token.space
+	position: relative
+
+.token.tab:not(:empty):before,
+.token.cr:before,
+.token.lf:before,
+.token.space:before
+	color: #808080
+	opacity: 0.6
+	position: absolute
+
+.token.tab:not(:empty):before
+	content: '\21E5'
+
+.token.cr:before
+	content: '\240D'
+
+.token.crlf:before
+	content: '\240D\240A'
+
+.token.lf:before
+	content: '\240A'
+
+.token.space:before
+	content: '\00B7'

packages/ui-default/components/highlighter/prismjs.js

@@ -51,6 +51,49 @@ try {
   // snowpack
 }
 
+const invisibles = {
+  tab: /\t/,
+  crlf: /\r\n/,
+  lf: /\n/,
+  cr: /\r/,
+  space: / /,
+};
+
+function addInvisibles(grammar) {
+  if (!grammar || grammar.tab) return;
+  for (const name in invisibles) {
+    if (Object.prototype.hasOwnProperty.call(invisibles, name)) {
+      grammar[name] = invisibles[name];
+    }
+  }
+  for (const name in grammar) {
+    if (Object.prototype.hasOwnProperty.call(grammar, name) && !invisibles[name]) {
+      if (name === 'rest') addInvisibles(grammar.rest);
+      else handlerInvisiblesToken(grammar, name); // eslint-disable-line no-use-before-define
+    }
+  }
+}
+
+function handlerInvisiblesToken(tokens, name) {
+  const value = tokens[name];
+  const type = Prism.util.type(value);
+  if (type === 'RegExp') {
+    const inside = {};
+    tokens[name] = { pattern: value, inside };
+    addInvisibles(inside);
+  } else if (type === 'Array') {
+    for (let i = 0, l = value.length; i < l; i++) handlerInvisiblesToken(value, i);
+  } else {
+    const inside = value.inside || (value.inside = {});
+    addInvisibles(inside);
+  }
+}
+
+Prism.hooks.add('before-highlight', (env) => {
+  console.log(UserContext.showInvisibleChar);
+  if (UserContext.showInvisibleChar) addInvisibles(env.grammar);
+});
+
 const prismjsApiWrap = {
   highlightBlocks: ($dom) => {
     $dom.find('pre code').get().forEach((code) => {