2017年6月11日 星期日

Regular Expression Quick Guide

Metacharacter Description
^ Matches the beginning of a line
$ Matches the end of the line
. Matches any character
\s Matches whitespace
\S Matches any non-whitespace character
* Repeats a character zero or more times
*? Repeats a character zero or more times(non-greedy)
+ Repeats a character one or more times
+? Repeats a character one or more times(non-greedy)
[aeiou] Matches a single character in the listed set
[^XYZ] Matches a single character not in the listed set
[a-z0-9] The set of characters can include a range
(pattern) Defines a marked subexpression to extract
(?:pattern) Defines a marked subexpression not to extract
x|y Matches any one of several subexpressions
? Matches the preceding subexpression zero or one time
{n} Matches the preceding subexpression n times
{n,} Matches the preceding subexpression at least n times
{n,m} Matches the preceding subexpression at least n and not more than m times

Assertion Lookbehind Lookahead
Positive (?<=pattern) (?=pattern)
Negative (?<!pattern) (?!pattern)


regex101
https://regex101.com/

2017年6月10日 星期六

在Blogger中添加CSS樣式


在Blogger中添加可以應用在所有文章內容的CSS樣式。以在其他部落格中常見的code block為例, 便於我們在張貼程式碼能時有特別的樣式highlight出來。

首先,進入Blogger的控制面板。並點選左列的「主題」,接者點選「自訂」按鈕。

接著會進入到Blogger主題設計工具的頁面。點選最左列的「進階」,接著點選「新增CSS」。 在「新增自訂CSS」中就能添加自己的CSS了!


將下面的CSS樣式輸入進去,並點選「套用至網誌」,再把要套入樣式的HTML標籤加上class='code_seg', 就能獲得跟下面樣式一樣的效果。
.code_seg {
    display: block;
    font-family: Courier New;
    font-size: 8pt;
    overflow: auto;
    background: #f0f0f0;
    border: 1px solid #ccc;
    padding: 10px 10px 10px 15px;
    max-height: 200px;
    line-height: 1.2em;
}

display: block
每個HTML的element都會有個預設的display屬性。例如:
div、p、form等的預設display為block,block的特性是會讓其內容在新的一行開始顯示,並盡可能把容器撐滿。 a、span、img等為inline,inline的element會連在一起,不會換行。

font-family: Courier New
字型設為Courier New

font-size: 8pt
字型大小設為8pt

overflow: auto
若文字超過block則自動產生捲軸

background: #f0f0f0
背景顏色設為#f0f0f0

border: 1px solid #ccc
邊框的寬度1px、樣式solid及顏色#ccc。

padding: 10px 10px 10px 15px
邊框內的內距,padding-top 10px、padding-right 10px、padding-bottom 10px及padding-left 10px。

max-height: 200px
element的最大高度200px。

line-height: 1.2em
行間距為1.2em