一個簡單的、主要是 CSS 的程式碼編輯器

在本文中，我將討論如何使用主要使用 CSS 來製作一個非常簡單的、基於瀏覽器的程式碼編輯器。我最初建立這個是當我需要讓使用者在我正在建立的 CMS 中編輯 JSON 時。

如果您只想跳到程式碼和工作範例，就在這裡。程式碼可以在這裡找到，工作範例可以在這裡

內容可編輯太爛了...

因此，如果您曾經考慮過建立自己的程式碼編輯器，那麼您可能已經看過 contenteditable。雖然 contenteditable 在許多情況下都非常有用，但在您鍵入時更新內容方面存在一個巨大的問題。當編輯器中的程式碼發生變化時，在語法高亮顯示程式碼後，幾乎不可能將遊標放回原來的位置。

就我而言，我想要一些非常小的東西，而不需要一些巨大的、笨重的庫。我開始考慮是否可以建立一個主要使用 CSS 的非常簡單的編輯器，僅使用 Javascript 建立語法突出顯示的輸出，並更新預覽。

我想輸入一個普通的 但只是更新語法突出顯示程式碼的單獨預覽。

幻覺是如何運作的

HTML 程式碼

<div id="editor">
  <div class="preview"></div>
  <textarea class="code" spellcheck="false"></textarea>
</div>

• 常規的 帶有透明文字
• A
  ;填滿了語法突出顯示的程式碼。
• 一個包裹你的 的容器和您的預覽 <div>;這樣他們就可以一起滾動並保持排隊。 <h2> CSS </h2> <p>這是我用來編輯器的整個 CSS。 <br> </p> <pre class="brush:php;toolbar:false">html, body { height: 100vh; width: 100vw; padding: 0; margin: 0; } #editor { height: 100%; width: 100%; box-sizing: border-box; display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; padding: 2rem; background-color: #1a1723; } #editor .code, #editor .preview { all: unset; } #editor .code, #editor .preview { height: auto; grid-column: 1 / 1; grid-row: 1 / 1; font-family: Monaco, monospace; font-size: 16px; resize: none; line-height: 24px; white-space: pre-wrap; overflow: hidden; } #editor .preview { pointer-events: none; color: #ccc; } #editor .code { color: rgba(255, 255, 255, 0); caret-color: magenta; } </pre> <h3> 重疊元素 </h3> <p>這裡的關鍵部分之一是使用顯示網格來覆蓋文字區域和預覽<br> </p> <pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre> <p>我使用 fr 單元來重疊容器內的兩個元素。您可以在 CSSTricks 上閱讀有關 fr 的更多資訊。 </p> <h3> 將文字區域和預覽設定為相同 </h3> <p>您可能會注意到我對預覽和文字區域應用了相同的規則。這可確保它們精確重疊。 <br> </p> <pre class="brush:php;toolbar:false">#editor .code, #editor .preview { height: auto; grid-column: 1 / 1; grid-row: 1 / 1; font-family: Monaco, monospace; font-size: 16px; resize: none; line-height: 24px; white-space: pre-wrap; overflow: hidden; } </pre> <h3> 使文字區透明 </h3> <p>使用 rgba 作為文字顏色可以使文字完全透明，因此看起來就像您正在選擇並編輯預覽。 <br> </p> <pre class="brush:php;toolbar:false">#editor .code { color: rgba(255, 255, 255, 0); caret-color: magenta; } </pre> <h2> 一點點 JavaScript </h2> <p>我們確實需要少量的 Javascript 將這一切結合在一起。讓我們看看我們需要什麼。 <br> </p> <pre class="brush:php;toolbar:false">const $preview = document.querySelector("#editor .preview"); const $code = document.querySelector("#editor .code"); function mirror() { // make textarea grow to height of content so we can scroll together $code.style.height = $code.scrollHeight; // update the preview underlay with the syntax highlight $preview.innerHTML = Prism.highlight( $code.value, Prism.languages.javascript, "javascript", ); } // insert two spaces on tab $code.addEventListener("keydown", (ev) => { if (ev.code === "Tab") { ev.preventDefault(); $code.setRangeText(" ", $code.selectionStart, $code.selectionStart, "end"); mirror(); } }); $code.addEventListener("input", mirror); mirror(); </pre> <blockquote> <p>我們將為此使用 Prism，但您可以使用任何您喜歡的東西。 </p> </blockquote> <h3> mirror() 函數在這裡做了幾件事。 </h3> <pre class="brush:php;toolbar:false"><div id="editor"> <div class="preview"></div> <textarea class="code" spellcheck="false"></textarea> </div> </pre> <p>這可確保您鍵入時，<textarea> 的高度保持不變。增長，以便容器將滾動而不是 <textarea> 。本身。您以前可能見過它用於製作“自動增長”文字區域。 <br>

  html,
  body {
    height: 100vh;
    width: 100vw;
    padding: 0;
    margin: 0;
  }
  
  #editor {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template: 1fr / 1fr;
    place-items: top;
    overflow: auto;
    padding: 2rem;
    background-color: #1a1723;
  }
  
  #editor .code,
  #editor .preview {
    all: unset;
  }
  
  #editor .code,
  #editor .preview {
    height: auto;
    grid-column: 1 / 1;
    grid-row: 1 / 1;
    font-family: Monaco, monospace;
    font-size: 16px;
    resize: none;
    line-height: 24px;
    white-space: pre-wrap;
    overflow: hidden;
  }
  
  #editor .preview {
    pointer-events: none;
    color: #ccc;
  }
  
  #editor .code {
    color: rgba(255, 255, 255, 0);
    caret-color: magenta;
  }
  

  然後我們使用 Prism 從 中獲取程式碼語法突出顯示它並將結果放置在預覽 <div> 中 <h3> 支援製表符縮排 </h3> <p>任何時候你在編輯程式碼時，都需要能夠縮進，這段程式碼允許我們在有人點擊 tab 時加入空格，然後再次呼叫mirror()來更新預覽。 <br> </p> <pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre> <p>最後，我們為 <textarea> 上的輸入新增一個事件監聽器。並在每次變更時使用mirror()更新預覽。然後我們先呼叫mirror()，以防<textarea>中已經有程式碼。在頁面載入時。

  就是這樣！顯然，如果您要編輯數千行程式碼，則在更新所有語法突出顯示的程式碼時可能會遇到效能問題。改進這個想法的一種方法是建立一個「虛擬」捲軸，並且僅突出顯示容器視圖中可見的程式碼。這就是 VsCode 的編輯器的工作方式。

  如果您想嘗試一下，您可以找到
  GitHub 上的程式碼和工作範例