- Oct 22 Tue 2019 05:31
-
關於 痞客邦 的手機版廣告
- Jun 26 Fri 2015 14:05
-
關於 痞客邦 的廣告
- Aug 20 Wed 2025 00:35
-
到訪人數突然歸零了
08/17 開始, 到訪人數突然歸零了
08/22 發現 總到訪人數 回復了, 但 各 URL 的到訪人數沒有回復了
09/03 發現 08/22 之後的到訪人數大量減少, 大約只剩以前的一半.
12/04 同樣的問題又來了, 到訪人數剩下十來個, 到訪文章列表不見了.
26/02/11 原來 12/03 ~ 12/07 系統經歷了一連串的大改版 (我好像一整個錯過了)
- Nov 13 Wed 2024 01:06
-
CSS: 關於 tab-size 設定
我們平時用於撰寫程式的整合開發環境 (IDE) 或文字編輯器上, 基本上都有一個設定: 設定一個水平定位字元 (HT, ASCII code 0x09) 相當於幾個空白字元 (SP, ASCII code 0x20), 讓我們可以依自己的需求 (或喜好) 調整程式碼的顯示.
但是長久以來 browser 一直都沒有這樣的設定. 而且預設狀況下, HT 字元和 SP 字元的寬度是一樣的, 連續的 HT/SP 字元在顯示上也都會縮減成一個空白字元的寬度. 除非, 它們是落在 <pre> tag 或者 <textarea> tag 裡(註一). 而且 HT 的寬度是固定的 8 個 SP, 沒有辦法更改. 這對教學網站或者分享程式片斷的部落格偶而會造成一點點小麻煩.
後來, CSS3 草案上定義了 tab-size 設定項來解決此問題. 大部份 browser 都是在 2020 年才開始支援此一功(註二) (雖然, 至今 CSS3 都尚未完全定稿). tab-size 的設定主要分為二種格式:
- 有附帶長度單位的: 這種很是簡單清楚, 設定值是多少, 顯示上 HT 字元就會被替換成多大寬度的空白.
- 沒有長度單位的: 這種則是設定一個 HT 字元代表多少個 SP 字元.
- Nov 12 Tue 2024 21:32
-
Chrome 錯誤回報: CSS 設定項 tab-size 的 bug
第 3 行使用 8 個空白字元, 第 4 行使用 2 個 tab 字元
CSS 設定: letter-spacing:0.1em, tab-size:4
; 1 2 3 4
;234567890123456789012345678901234567890
.RSECT
;234567890123456789012345678901234567890
.RSECT
- Oct 28 Mon 2024 18:53
-
asm51 test
這篇文章受密碼保護，請輸入密碼後查看內容。
- Oct 24 Thu 2024 19:12
-
Syntax High Light (在 痞客邦部落格 中使用) Part3: Prism.js
- Oct 15 Tue 2024 10:58
-
測試頁面: 程式上色 Prism.js
這篇文章受密碼保護，請輸入密碼後查看內容。
- Oct 14 Mon 2024 18:59
-
測試頁面: 程式上色 highlight.js 客製化
這篇文章受密碼保護，請輸入密碼後查看內容。
- Oct 13 Sun 2024 10:28
-
測試頁面: 一般項目測試
- Sep 30 Mon 2024 17:54
-
JavaScript: 客製化 highligh.js
由於我在 pixnet 部落格裡撰寫程式及網頁技術的文章, 給程式上色這個需求一直都是使用套件 highlight.js. 不過有幾個地方總是不那麼滿意: 像是用於 linux 指令或批次檔的 <code class="language-bash"> 或者用於 Windows 命令提示字元 (CMD 指令或批次檔) 的 <code class="language-dos">, 它們總是會少幾個指令沒有上到色. 下面幾個方法是我這幾年來自己琢磨出來的修正 bash 和 dos 這二類程式區塊上色問題的辦法, 在此分享給有需要的朋友.
方法一: 直接修改上色的部份
這個方法適合用於補足少量 highlight.js 沒有上色的部份. 這是最直觀的方法, 而且不限制被上色的語言, 我們只要將想要上色的部份用 <span> tag 括住, 並加上需要的 style 即可. 或者也可以用預設 display 為 inline 的元素 (<b>, <i>...等) 修改字型變化, 請看下例的 HTML 上色片斷:
一般文字 <i style="color:red">text_to_use_red_color</i> 一般文字
一般文字 <span class="hljs-built_in">text_to_use_as_built_in</span> 一般文字
一般文字 <span class="hljs-built_in">text_to_use_as_built_in</span> 一般文字
- Sep 28 Sat 2024 13:44
-
CSS: 取消繼承來的 CSS 設定
想要取消繼承來的 CSS 設定? 這種想法有點瘋狂! 這原本是不會出現的. 因為絶大部份的狀況下, 我們總是可以精細的調整 CSS 的 Selector, 來達成區分 CSS 的作用範圍. 除非... CSS 的繼承來源你動不了. 又或者像是我在 "CSS: Double Strikeout 雙刪除線" 這一篇貼文裡遇到的狀況: 想要在同一個頁面展示二種雙刪除線的 CSS 設定效果 (不動用 <iframe> tag). 這個時候正是本篇的主角 all: revert 這種另類 CSS 大展身手的時候.
前情提要
首先, 狀況是我原本有一套雙刪除線的 CSS 設定套用在所有貼文裡. 這套雙刪除線作法是: 設定 <del> tag 的 border-top, 並向下位移此 <del> tag 的位置, 然後再用一個 <span> tag 把文字位置移回來.
這套雙刪除線我用的 CSS Selector 是:
- .article-content-inner del 和
