使用 Google Scripts Docs 高亮显示 TypeScript

如果您是一位 TypeScript 程序员，并且想要在 Google Docs 中突出显示 TypeScript 代码，那么本篇教程就是为您准备的。我们将介绍如何使用 Google Apps Script (GAS) 在 Google Docs 中高亮显示 TypeScript 代码。

第一步：创建新的 Google Docs

首先打开您的谷歌文档，创建一个新的文档。在接下来的步骤中，我们将在这个文档中插入 TypeScript 代码。

第二步：获取 Google Scripts

在谷歌文档中，单击“工具”菜单，然后选择“脚本编辑器”。这将打开一个新的Google Apps Script编辑器窗口。

第三步：编写 Google Scripts 代码

在 Google Scripts 编辑器中，我们将写一些代码来帮助我们高亮 TypeScript 代码。

我们先定义一个 highlightTypescriptCode 函数来实现对 TypeScript 代码的高亮显示。

function highlightTypescriptCode() {
  const selection = DocumentApp.getActiveDocument().getSelection();
  const elements = selection ? selection.getRangeElements() : [];

  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];

    if (element.getElement().editAsText) {
      const text = element.getElement().asText();
      const start = element.getStartOffset();
      const end = element.getEndOffsetInclusive();

      if (start !== end) {
        const originalText = text.getText().substring(start, end + 1);
        const highlightedText = highlightTypeScript(originalText);

        text.deleteText(start, end);
        text.insertText(start, highlightedText);
      }
    }
  }
}

第四步： TypeScript 代码高亮显示

在上一步中我们编写了 highlightTypescriptCode 函数，但是还需要编写高亮显示 TypeScript 代码的功能，代码如下所示。

function highlightTypeScript(code: string): string {
  const tsKeywords = ["class", "constructor", "declare", "enum", "export", "extends", "import", "interface", "let", "module", "namespace", "public", "static", "super", "type", "implements", "function", "throw", "new", "return", "const", "while", "if", "do", "else", "break", "continue", "switch", "try", "catch", "finally", "for", "in", "null", "undefined"];
  const tsOperators = [
    "=", ";", "(", ")", "{", "}", "[", "]", "++", "--", "+", "-", "*", "/", "%", "+=", "-=", "*=", "/=", "%=", "==", "===", ">=", "<=", ">", "<", "&&", "||", "!",
  ];

  const lines = code.split("\n");

  let highlightedCode = "";
  lines.forEach((line) => {
    let highlightedLine = line;

    // Keywords
    tsKeywords.forEach((keyword) => {
      highlightedLine = highlightedLine.replace(
        new RegExp(`\\b${keyword}\\b`, "g"),
        "<b><font color=\"blue\">" + keyword + "</font></b>"
      );
    });

    // Operators
    tsOperators.forEach((operator) => {
      highlightedLine = highlightedLine.replace(
        new RegExp(`\\${operator}`, "g"),
        "<font color=\"brown\">" + operator + "</font>"
      );
    });

    highlightedCode += highlightedLine + "\n";
  });

  return highlightedCode;
}

第五步：将代码运行在 Google Scripts 编辑器中

点击 Google Scripts 编辑器界面的 “运行函数”按钮，这将启动高亮显示 TypeScript 代码的功能，将上面两段代码粘贴进去，点击“运行”按钮即可。

第六步：选择要高亮显示的 TypeScript 代码

在打开的 Google Docs 文档中选中您想要高亮显示的 TypeScript 代码。

第七步：运行 Google Scripts

在 Google Scripts 编辑器中单击“运行函数”按钮。这将运行脚本并高亮显示选定的 TypeScript 代码。

结论：

以上就是如何使用 Google Scripts 在 Google Docs 中高亮显示 TypeScript 代码的详细步骤。现在已经能轻松地在您的 Google Docs 文档中高亮显示 TypeScript 代码了。