---
title: 【種樹】實作 CSS 凸顯文字內容： Alert 與 Highlighting
date: 2021-03-11 21:08
is_modified: true
disqus: cynthiahackmd
categories:
- "程式設計 › 程式語言與架構"
tags:
- "程式設計 › 程式語言與架構"
- "Github Page"
- "Jekyll-NextT"
- "CSS/SCSS"
- "前端"
- "技能樹栽種"
---
{%hackmd @CynthiaChuang/Github-Page-Theme %}
<br>
我目前 Github Page 採用的主題是 [jekyll-theme-next](https://github.com/Simpleyyt/jekyll-theme-next) ，我很喜歡這個主題。但唯一讓我不滿意的大概就是沒有凸顯內容文字的手段，只好自食其力了！
<!--more-->
## Alert
先上張結果圖，實作了六種顏色，分別為 default、primary、info、success、warning、danger。
<p class="illustration">
<img src="https://imgur.com/7TPANGR.png" alt="Blog Alert">
</p>
個人倒是很少用 default 與 primary。另外，Alert 左方的 icon 與上方的header，可以由撰寫者自己決定開或不開。
### 實作
在實作時我參考了 kanboo.github.io 的[程式碼](https://github.com/kanboo/kanboo.github.io/blob/4292e79031c3f8005add53df25e519f9fd4355cf/themes/next/source/css/_common/components/tags/note.styl)，雖然網站外觀看起來很相似，但它是用的是另外一套網誌框架 - [hexo](https://hexo.io/zh-tw/)，所以那份程式碼不能直接移植 So sad :crying_cat_face:
<br>
不過看了一下沒有很難做，所以仿照這份程式做了一份：
#### 1. 顏色
在開始前，先來設定外觀顏色。在 [jekyll-theme-next](https://github.com/Simpleyyt/jekyll-theme-next) 中客製化的顏色設定會統一放在 `\_sass\_variables\custom.scss` 中。
```sass=
// Default
$alert-default-border : $grey-dim;
$alert-default-bg : $gainsboro;
$alert-default-text : $alert-default-border;
$alert-default-hover : $black-deep;
$alert-default-icon : "\f0a9";
```
其中 icon 是使用 [Font Awesome](https://fontawesome.com/) 所提供的。可以到網站中找找自己喜歡的 icon，然後複製它的 Unicode，就可以套用了。
:::warning
如果不是使用跟我一樣的主題，在開始前請在檢查是否有引入 [Font Awesome](https://fontawesome.com/)。
:::
#### 2. 本體
接下來決定外觀長怎樣，這部分是寫在 `\_sass\_custom\custom.scss` 中。下面只介紹部分程式碼，完整的程式碼會貼在本節之後。
1. **.post-body .alert**
為了限定是在文章中才會出現，所以我這邊用了[多重選擇器](https://pjchender.blogspot.com/2015/03/cssmultiple-selectorsspace.html)來限縮選取。
2. **border、border-left、border-radius**
這區塊是為了畫出 Alert。因此先將它初始化後，指定約 4px 的實心線條畫出的左邊的邊框，最後再加上圓角柔和一下線條。
3. **background-color、border-left-color、color**
這邊則是指定了本體的底色、左邊框顏色與文字的顏色。不過不過，這邊只是預設的顏色，一旦指定新的選擇器，這邊就會被覆蓋掉。
4. **&:not(.no-icon)**
這個區塊則是設定 icon 的部分。開頭的`&:`是 sass 語法，對應到的是 css 的[偽類別](https://developer.mozilla.org/en-US/docs/Web/CSS/:not)的語法。當它判斷沒有使用 `no-icon` 這個選擇器時，就會在前面加上 icon ，設定相對並設定相對應位置關係。一樣 content 與 color 會隨著不同的選擇器而變動。
:::danger
**別忘了 `font-family`！**
就是這行 `font-family: 'FontAwesome';` 害我找了好久的 bug.
:::
5. **&.primary**
這邊就是剛剛提過會隨著不同選擇器而邊動的區塊。
<br>
```sass=
.post-body .alert {
position: relative;
padding: 15px;
margin-bottom: 20px;
// commit setting
border: initial;
border-left: 4px solid;
border-radius: 4px;
// default seeting
background-color: $alert-default-bg;
border-left-color: $alert-default-border;
color: $alert-default-text;
a {
color: $alert-default-text;
border-bottom-color: $alert-default-text;
&:hover {
color: $alert-default-hover ;
border-bottom-color: $alert-default-hover;
}
}
h2, h3, h4, h5, h6 {
if note_icons {
margin-top: 3px;
} else {
margin-top: 0;
}
margin-bottom: 0;
border-bottom: initial;
padding-top: 0 !important;
}
p, ul, ol, table, pre, blockquote {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.head {
font-weight:bold;
}
&:not(.no-icon) {
padding-left: 45px;
&:before {
// common setting
position: absolute;
font-family: 'FontAwesome';
font-size: larger;
top: 13px;
left: 15px;
// default setting
content: $alert-default-icon;
color : $alert-default-text;
}
}
&.primary {
background-color: $alert-primary-bg;
border-left-color: $alert-primary-border;
color: $alert-primary-text;
a {
color: $alert-primary-text;
border-bottom-color: $alert-primary-text;
&:hover {
color: $alert-primary-hover ;
border-bottom-color: $alert-primary-hover ;
}
}
&:not(.no-icon) {
&:before {
content: $alert-primary-icon;
color : $alert-primary-text;
}
}
}
}
```
### 使用
在文章中需要的地方，插入下列程式碼，就可以看到上圖的效果了。
```htmlmixed=
<div class="alert">
<div class="head">Default With Icon</div>
這是 default 底色、有 icon 、有 header 的版本
</div>
```
```htmlmixed=
<div class="alert primary no-icon">
<div class="head">Primary Without Icon</div>
這是 primary 底色、沒有 icon 、有 header 的版本
</div>
```
## Highlighting
另一種凸顯文字的方式就是==用螢光筆==畫重點啦。
<p class="illustration">
<img src="https://i.imgur.com/ZaF6hhZ.png" alt="Highlighting">
</p>
雖然我準備了四隻螢光筆，但其實我只用過一隻 XDDD 而且這樣一列才發現，一跟二的顏色太相近了。算了，之後要用其他顏色的時候再來調整。
### 實作
相比 Alert，Highlighting 的實作就簡單多了。
#### 1. 顏色
一樣先到 `\_sass\_variables\custom.scss` 中，設定螢光筆顏色。
```sass=
// highlighting colors
$highlighting-default : #e6fcf2;
```
#### 2. 本體
再回到 `\_sass\_custom\custom.scss` 中設定本體。 如果不算 warning 選擇器的部分，程式碼只有四行而已。
其中需要注意的是`white-space`，我之前把它的屬性設成了 `nowrap`，導致當 highlight 較長文句時，該句不會換行，使的文句超出頁面([#5](https://github.com/CynthiaChuang/CynthiaChuang.github.io/issues/5))。
```sass=
.post-body .highlighting {
padding: 0 2px;
white-space: pre-line;
border-radius: 2px;
background-color: $highlighting-default;
&.warning {
background-color: $highlighting-warning;
}
}
```
### 使用
在文句中需畫螢光筆的地方，插入下列程式碼，就可以看到上圖的效果了。
<p class="illustration">
<img src="https://i.imgur.com/p4BInX7.png" alt="Highlighting">
</p>
```htmlmixed=
拜託，請幫我畫<span class="highlighting">重點</span>。
```
<br>
<p class="illustration">
<img src="https://i.imgur.com/VDn59fA.png" alt="Highlighting">
</p>
```htmlmixed=
拜託，請幫我畫<span class="highlighting warning">重點</span>。
```
<br>
:::info
:information_source: **HTML \<mark> Tag**
後來發現用 HTML \<mark> Tag 來改效果會更好，所以又做了另外一篇：
- [【技能樹栽種】 HTML Mark Tag 實作 Highlighting](https://hackmd.io/@CynthiaChuang/Mark-Element-is-Used-to-Highlight-Content)
:::
## 參考資料
1. [themes note.styl](https://github.com/kanboo/kanboo.github.io/blob/4292e79031c3f8005add53df25e519f9fd4355cf/themes/next/source/css/_common/components/tags/note.styl)。檢自 kanboo/kanboo.github.io (2019-12-16)。
2. PJCHENder (2016-09-07)。[[技術分享] CSS中的多重選擇器（Multiple Selectors）包含空白或逗號](https://pjchender.blogspot.com/2015/03/cssmultiple-selectorsspace.html)。檢自 PJCHENder 那些沒告訴你的小細節 (2020-02-09)。
3. MDN contributors (2019-12-10)。[border-left](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left) 。檢自 MDN web docs (2020-02-09)。
4. MDN contributors (2019-12-20)。[:not()](https://developer.mozilla.org/en-US/docs/Web/CSS/:not)。檢自 MDN web docs (2020-02-09)。
5. [CSS white-space 属性](https://www.w3school.com.cn/cssref/pr_text_white-space.asp)。檢自 W3school (2020-02-09)。
## 更新紀錄
:::spoiler 最後更新日期：2021-03-11
- 2021-03-11 更新 新增 mark 一文的超連結
- 2020-08-14 更新 新增超連結顏色
- 2020-02-09 發布
- 2020-08-13 起稿
:::
<br><br>
> **本文作者**： 辛西亞．Cynthia
> **本文連結**： [辛西亞的技能樹](https://cynthiachuang.github.io/Accent-the-Text-by-CSS-Alert-and-Highlighting) / [hackmd 版本](https://hackmd.io/@CynthiaChuang/Accent-the-Text-by-CSS-Alert-and-Highlighting)
> **版權聲明**： 部落格中所有文章，均採用 [姓名標示-非商業性-相同方式分享 4.0 國際](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en) (CC BY-NC-SA 4.0) 許可協議。轉載請標明作者、連結與出處！
Sign in via Facebook
Sign in via X(Twitter)
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Connect another wallet