在html檔中呈現編輯器JS standard style空格

使用時機: 在CodePen作筆記時想到的。
兩種方法可以幫助在 HTML 中保留code的格式，但具體的效果可能會根據不同的瀏覽器和樣式適用程度而有所不同。

方法1 `<pre></pre>`

<pre> 可以保留空格和換行符號，以原始的格式顯示文本內容。你可以將代碼包裹在<pre>中，但這樣做可能會改變字體和行距，並將文字呈現為等寬字體。

 <pre>
  const isGreaterThanTen = (x: number): boolean => {
    return x > 10 ? true : false;
  }
 </pre>

方法2 `<code></code>`

code包裹在 <code>中，然後使用 CSS 設置 white-space: pre-wrap;來保留空格和換行，但這不一定會完全保留原始的縮排。

//html
<div class="code-block-wrapper">
  <code class="code-block">
    const isGreaterThanTen = (x: number): boolean => {
      return x > 10 ? true : false;
    }
  </code>
</div>

//CSS
pre, div.code-block-wrapper {
  background-color: #98e9e7; //<pre> 背景色整個區塊
  border-radius: 3px;
  line-height: 2;
  padding: 5px;
}
code.code-block {
  background-color: #eee; //<code> 背景色只有code部分
}
code.code-block {
  white-space: pre-wrap; 
}