大家好，我是韋恩，今天是鐵人賽的第三十一天，今天我們來練習一下在web裡怎麼提供editor區塊編輯。之後我們會把編輯功能加到Webview裡讓使用者編輯。

今天，我會介紹一個javascript的工具prismjs。

Prismjs簡介

[圖源：prismjs官網截圖]

在javascript的世界裡，我們有非常多強大的editor可以使用，如知名的VSCode團隊打造的Monaco Editor，此外還有ace等受歡迎的js編輯器工具。為什麼這邊我們挑選了prismjs呢？

理由很簡單：輕巧、快速

對於我們的使用情境，我們不需要太多強大的功能，把整個vscode的功能搬到Webview上，僅需要編輯程式碼的區域與編輯器的外觀樣式。對於Webview而言，佔用使用者的資源越少是越好的。

而Prismjs具有幾個特性:

• library體積小，核心gzip後僅有2kb，加了語言與主題樣式也不超過4kb。
• 速度快，如果需要，甚至可啟用Webworker的功能。
  (在Webview裡我們不會使用到，但還是值得提一下)
• 容易調整樣式，使用css即可客製化。

因為有以上特點，符合使用情境，我們選擇了這個工具。

接下來，我們會使用prism-react-renderer這個套件，它會提供封裝了prismjs套件的component。

讓我們下載prism-react-renderer

yarn add prism-react-renderer //或是npm install prism-react-renderer 

下載完以後，我們可以import相關的component

import Highlight, { defaultProps } from 'prism-react-renderer';

並且可以這樣使用

const editedCode = `

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 300);
});

promise1.then((value) => {
  console.log(value);
  // expected output: "foo"
});

console.log(promise1);
// expected output: [object Promise]
`;

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: 'React'
    };
  }
  render() {
    return (
      <Highlight
        {...defaultProps}
        code={exampleCode}
        language="javascript"
      >
        {({ className, style, tokens, getLineProps, getTokenProps }) => (
          <pre className={className} style={style}>
            {tokens.map((line, i) => (
              <div {...getLineProps({ line, key: i })}>
                {line.map((token, key) => (
                  <span {...getTokenProps({ token, key })} />
                ))}
              </div>
            ))}
          </pre>
        )}
      </Highlight>
    );
  }
}

結語

好的，今天簡單介紹將引入的套件。

明天我們繼續實作，我們明天見，掰掰！