Skip to main content

讓你的 Markdown 有更漂亮的鍵盤按鍵表示方式

前言​

在寫技術文章的時候，常常會需要呈現一些鍵盤上的按鍵組合，例如 Ctrl + C、 Ctrl + V 等等...

比較常見的作法是直接用 Ctrl + C、 Ctrl + V 這樣的方法表示，但是實在是不怎麼美觀。

GitHub 原生就有支援 kbd 這個標籤，那 Docusaurus 呢?

答案是--當然也有，只是它預設沒被套上美美的 CSS。

這篇文章就來跟大家介紹怎麼透過自訂 CSS 來讓 kbd 標籤美美的。

作法​

只需要在自訂的 css 檔中加入下列樣式即可：

kbd {
  margin: 0px 0.2em;
  padding: 0.1em 0.6em;
  border-radius: 3px;
  border: 1px solid #ccc;
  color: rgb(51, 51, 51);
  font-family: "Arial Black", Impact;
  display: inline-block;
  box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
  background-color: rgb(247, 247, 247);
  -moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
  -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

接著在 markdown 裡面就可以直接使用囉!!

例如：

<kbd>F1</kbd> <kbd>F2</kbd> <kbd>F3</kbd> <kbd>F4</kbd>

<kbd>Ctrl</kbd> + <kbd>C</kbd>

<kbd>🡄</kbd> <kbd>🡆</kbd> <kbd>🡅</kbd> <kbd>🡇</kbd>

<kbd>PrtScn</kbd> <kbd>Tab ↹</kbd>

<kbd>Enter</kbd>

<kbd>⊞ Win</kbd>

<kbd>😆</kbd>

就會顯示成：

F1 F2 F3 F4

Ctrl + C



🡄 🡆 🡅 🡇

PrtScn Tab ↹

Enter

⊞ Win

😆

是不是好看多了呢!?

小提示

kbd 標籤除了可以搭配 Unicode 符號之外，也可以搭配 Emoji 使用喔!!

參考資料​