一個簡單的、主要是 CSS 的程式碼編輯器-css教學-PHP中文網

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

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

內容可編輯太爛了...

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

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

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

幻覺是如何運作的

A Simple, mostly CSS code editor

HTML 程式碼

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

登入後複製

常規的帶有透明文字
A
;填滿了語法突出顯示的程式碼。
一個包裹你的的容器和您的預覽 <div>;這樣他們就可以一起滾動並保持排隊。 <h2> CSS </h2> <p>這是我用來編輯器的整個 CSS。 <br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div> <h3> 重疊元素 </h3> <p>這裡的關鍵部分之一是使用顯示網格來覆蓋文字區域和預覽<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div> <p>我使用 fr 單元來重疊容器內的兩個元素。您可以在 CSSTricks 上閱讀有關 fr 的更多資訊。 </p> <h3> 將文字區域和預覽設定為相同 </h3> <p>您可能會注意到我對預覽和文字區域應用了相同的規則。這可確保它們精確重疊。 <br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">登入後複製</div></div> <h3> 使文字區透明 </h3> <p>使用 rgba 作為文字顏色可以使文字完全透明，因此看起來就像您正在選擇並編輯預覽。 <br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">#editor .code { color: rgba(255, 255, 255, 0); caret-color: magenta; } </pre><div class="contentsignin">登入後複製</div></div> <h2> 一點點 JavaScript </h2> <p>我們確實需要少量的 Javascript 將這一切結合在一起。讓我們看看我們需要什麼。 <br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">登入後複製</div></div> <blockquote> <p>我們將為此使用 Prism，但您可以使用任何您喜歡的東西。 </p> </blockquote> <h3> mirror() 函數在這裡做了幾件事。 </h3> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div id="editor"> <div class="preview"></div> <textarea class="code" spellcheck="false"></textarea> </div> </pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div> <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> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div> <p>最後，我們為 <textarea> 上的輸入新增一個事件監聽器。並在每次變更時使用mirror()更新預覽。然後我們先呼叫mirror()，以防<textarea>中已經有程式碼。在頁面載入時。

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

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