部落格園MarkDown程式碼塊樣式修改

學習自：

部落格園Markdown編輯器修改程式碼配色、新增程式碼行號 2020-01-01

我的需求：

1. 主要是修改程式碼塊註釋的樣式，預設的註釋也太垃圾了
2. 使整個程式碼塊的顯示規整一點，說實話預設的整個程式碼塊的顯示都很垃圾

插入位置：

部落格園首頁 - 右上角頭像進入個人頁面 - 右上角進入設定 - 進入部落格設定選項卡 - 把下面程式碼複製進頁面定製CSS中（注意，刪除其中的註釋，否則某些樣式不好使）。

主要增加了一些原始碼註釋，還有一些奇怪的問題。可能並不奇怪，只是我不懂CSS理解不了。

唯一修改是//white-space: pre;這句，這句控制程式碼塊內的長程式碼會不會自動換行，我個人是喜歡自動換行，如果不想自動換行取消這句的註釋即可。

.cnblogs-markdown .hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #1E1E1E !important;
    color: #FFF;
    //white-space: pre;
    word-break: normal;
    font-family: "Consolas",sans-serif!important;
    font-size:14px!important;
}

// .cnblogs-markdown 感覺也沒用啊。有的文件說加了.cnblogs-markdown配置才會生效，試了一下不加也能生效
// !important 也是，不加也生效。
// 可能是針對某些系統，樣式來說不會生效吧。加上總沒錯
// bool string 還有函式名，字串本身就是這些顏色。白色設定的是本來黑色的字元

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #1E1E1E;
  color: #DCDCDC;
}

code.hljs{
  display: inline-block !important;
  vertical-align: top !important;
}

.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name {
  color: #569CD6;
}
// 這句影響了Return的顏色
.hljs-link {
  color: #569CD6;
  text-decoration: underline;
}
.hljs-built_in,
.hljs-type {
  color: #4EC9B0;
}
// 這句影響了關鍵字bool，string的顏色。大體試了一下.hljs-built_in對應string；.hljs-type對應bool
.hljs-number,
.hljs-class {
  color: #B8D7A3;
}
// 這句影響了數字的顏色，但是上面不能加註釋，加了註釋的那個註釋這個改數字顏色就不好使了
.hljs-string,
.hljs-meta-string {
  color: #D69D85;
}
// 這句影響了字串的顏色，但是上面不能加註釋，加了註釋的那個註釋這個改字元顏色就不好使了
// 總之，你要是直接把這段複製僅頁面定製CSS程式碼裡，這些修改就不好使了，這一段一段之間可以分開，但不能有註釋

.hljs-regexp,
.hljs-template-tag {
  color: #9A5334;
}

.hljs-subst,
.hljs-function,
.hljs-title,
.hljs-params,
.hljs-formula {
  color: #DCDCDC;
}

.hljs-comment,
.hljs-quote {
  color: #57A64A;
  font-style: italic;
}
// 這裡匹配的是註釋顏色和字型

.hljs-doctag {
  color: #608B4E;
}

.hljs-meta,
.hljs-meta-keyword,
.hljs-tag {
  color: #9B9B9B;
}

.hljs-variable,
.hljs-template-variable {
  color: #BD63C5;
}

.hljs-attr,
.hljs-attribute,
.hljs-builtin-name {
  color: #9CDCFE;
}

.hljs-section {
  color: gold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-code {
  font-family:'Monospace';
}

.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #D7BA7D;
}

.hljs-addition {
  background-color: #144212;
  display: inline-block;
  width: 100%;
}

.hljs-deletion {
  background-color: #600;
  display: inline-block;
  width: 100%;
}