不用外掛也能做螢光筆高亮文字

不用外掛也能做螢光筆高亮文字：WordPress 段落內快速標註教學（自架站新手適用）

你是不是也遇過這種狀況：文章寫到一半，想把某句話「畫起來」，讓讀者一眼看到重點，但又不想裝一堆外掛，怕網站變慢、怕衝突、怕更新後出問題？

其實 WordPress 自架站（尤其你是 Gutenberg 區塊編輯器）完全可以靠「一小段 CSS + 一個簡單寫法」，做到像螢光筆畫線一樣的高亮文字效果，而且做完之後你在文章段落中就能快速套用。

這篇我會用新手也能照做的方式帶你完成：
1）加上螢光筆 CSS
2）段落內快速使用（不用自訂 HTML 區塊）
3）想更快就加 shortcode（可選）

推薦閱讀 :自行架網站 vs 免費平台：如何挑選適合平台？

內容目錄

在 wordpress 你會得到什麼效果？

你可以在段落裡把一小段文字畫起來，底下會出現一條黃色筆劃，就像螢光筆畫過一樣。
這個效果特別適合用在教學文、評測文、懶人包、優惠資訊、結論重點，讀者一眼就知道哪句是「你最想讓他看到的」。

步驟一：加入螢光筆 CSS（不用外掛）

最推薦的新手做法是：直接用 WordPress 內建的「額外 CSS」，安全、穩定、也不用改主題檔案。

請到 WordPress 後台：
外觀 → 自訂 → 額外 CSS
然後把下面這段貼上去（貼完記得按發佈 / 儲存）：

.highlighted-text2{
  position: relative;
  display: inline-block;
  z-index: 0;
  isolation: isolate;
  color: inherit;
  padding: 0 .08em;
}

.highlighted-text2::before{
  content: "";
  position: absolute;
  left: -.06em;
  right: -.06em;
  bottom: .12em;
  height: .35em;
  background: #fac000;
  transform: none;          /* 直線，不旋轉 */
  z-index: -1;
  border-radius: .18em;
  pointer-events: none;
}

步驟二：Gutenberg 段落中怎麼用最快？

很多新手會以為「自訂 HTML」可以放在段落中間，但其實自訂 HTML 是獨立區塊，不能塞進一般段落內。

所以你要在段落中標註螢光筆，最快且最穩的做法就是用 <span> 包起來。

你只要記住這個格式：

<span class="highlighted-text2">這段字會變螢光筆</span>

推薦閱讀 : 壓縮7張圖少掉25MB！圖檔壓縮這樣做，畫質幾乎沒變還免費！

段落內實際操作方法（超快）

  1. 在 Gutenberg 先把段落文字打好
  2. 選取你想要標註的那段字
  3. 點該段落右上角 ⋮ → 選「編輯為 HTML」
  4. 把文字包進這個 span：
<span class="highlighted-text2">你要螢光筆的文字</span>
  1. 切回視覺模式，就完成了

熟練之後大概 5～10 秒就能標註一次。

懶人加速技巧：存一個模板片段，之後直接貼

如果你文章常常需要螢光筆，我建議你把這段存在 Notion / 備忘錄：

<span class="highlighted-text2"></span>

以後你就：貼上 → 把游標放中間 → 打字
完全不用想語法，超快。

更快的玩法（可選）：加 shortcode，在段落中直接打

如果你覺得每次包 <span> 仍然麻煩，那你可以做一次設定，讓你之後直接在段落裡用這種方式：

這是正常文字，[hl]這段會變螢光筆[/hl]，後面繼續正常。，後面繼續正常。

這種寫法會比切 HTML 還快，而且不容易貼錯。

shortcode 設定方式（只做一次）

你可以把下面這段 PHP 加到主題的 functions.php（建議先備份，避免貼錯）：

function hl_shortcode($atts, $content = null) {
  return '<span class="highlighted-text2">' . do_shortcode($content) . '</span>';
}
add_shortcode('hl', 'hl_shortcode');

之後你在 Gutenberg 的段落裡，就可以直接寫：

[hl]這段文字就是螢光筆[/hl]

不用外掛也能做出超有感的重點標註

螢光筆高亮看起來是小功能，但它對文章的「視覺引導」非常有效。
你不用外掛，只要一段 CSS 就能全站通用，也可以在 Gutenberg 段落中快速套用。

如果你是自架站新手，我建議你照這個順序來：

1）先把 CSS 放到「額外 CSS」
2）段落中用 <span class="highlighted-text2">...</span>
3）如果你用得很頻繁，再加 shortcode ...

常見問題

為什麼我前台沒有看到效果？

如果你包了 span 但前台沒變色，最常見原因是「快取」：
1.用無痕視窗打開文章試試看
2.網址後面加 ?v=1 強制刷新
3.如果你有 Cloudflare 或快取外掛，記得清快取

螢光筆位置怪怪的怎麼調？

你只要調這兩個參數就好：
bottom: .12em; 控制底線離文字底部距離
height: .35em; 控制螢光筆厚度
如果你覺得底線太靠近文字，把 bottom 調小一點，例如：
bottom: .08em;
如果你覺得太粗，把 height 調小一點，例如：
height: .25em;

推薦閱讀

參考資料

相關文章

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *