読者です 読者をやめる 読者になる 読者になる

雑記: シンタックスハイライトの配色変更

シンタックスハイライトの配色を再考して更新したのでまとめ。飽きたらまた変えるかも。
Ex. は自分の過去の記事での例。R と CSS はコードがほぼハイライトされるがハイライトとは何だったのか。

CSS class (property) color Ex. Python Ex. R Ex. CSS
.entry-content .code (background) #f2f2f2
.entry-content .code (color) #4d4d4d x = != + [ ( x : ;
.synStatement (color) #006eb0 if for in <- = && if return body
.synType (color) #006eb0 function color
.synPreProc (color) #618ea3 import @import "xxx";
.synIdentifier(color) #618ea3 len open print .categories {
.synSpecial (color) #618ea3 \r\n , ( { [[
.synConstant (color) #aa8840 1 "w" 1 "Japan" 4px #aa8840
.synComment (color) #47885e #comment #comment /*comment*/
スタイルシートは以下。コメントは色変更に加えて斜体にしている。

/* ソースコードの色とフォントサイズ */
.entry-content pre {
  font-size: 95%; /* 88% */
  background: #4d4d4d;
  color: #f2f2f2;  
  font-family: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif;
  margin: -5px 0 10px;
  padding: 10px 13px;
    
}
.entry-content pre a.keyword{
  color: #dcdcdc;  
  border-bottom: 0;
}
.entry-content .code {
  background: #f2f2f2;
  white-space: pre;
  line-height: 1.4;
  color: #4d4d4d;
}
.synComment { color: #47885e; font-style: italic; }
.synIdentifier, .synPreProc, .synSpecial { color: #618ea3; }
.synType, .synStatement { color: #006eb0; }
.synConstant { color: #aa8840; }

関連: スタイルシートの上書き内容メモ - クッキーの日記