bowerでgoogle code-prettifyをインストールする

2018.09.13

code-prettifyをインストールしたが正しく動作しなかった。原因はトリガーとなるrun_prettify.jsが読み込まれていなかったこと。通常のインストールコマンド

bower install code-prettify

ではprettify.cssとprettify.jsのみが差し込まれる。従って下記をbower.jsonへ追記する。

省略
"overrides": {
  "code-prettify": {
    "main": [
      "src/prettify.css",
      "src/prettify.js",
      "src/run_prettify.js"
    ]
  }
}
省略

https://github.com/google/code-prettify

疑似要素と疑似クラスとコロン

2018.09.12

疑似要素 (Pseudo-elements)と疑似クラス(Pseudo-class)。どちらがコロンでどちらがダブルコロンなのかいつも迷ってしまう。

/* 疑似要素 */
p::before {
    content: "■";
}

/* 疑似クラス */
a:hover {
    text-decoration: underline;
}

メモ: ルールとして、単一コロン(:)の代わりに二重コロン(::)を使用してください。これで疑似要素と疑似クラスを区別します。但し、この区別は W3C の古いバージョンの仕様書には存在しなかったため、多くのブラウザーは元々の疑似要素に対して両方の文法に対応しています。