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

maRkの

キャンペーンだとか、Chess.appについてのなにか

記事でスーパーpre使ったとき、使用言語も表示してみる

Clipボタン

こんな感じの。


毎回カスタマイズに JavaScript 使うのもなんなので、CSSだけでやってみる。
{}デザインCSSのあたりで。必要な言語ぶん追加する。
[はてな記法]ソースコードを色付けして表示する(シンタックス・ハイライト) - はてなブログ ヘルプ

pre[data-lang=html]:before {
  padding: 0 0;
  margin: 0 0;
  display:block;
  background: #777;
  color: #FFF;
  content: ' HTML';
  width: inherit;
  position: relative;
}

pre[data-lang=css]:before {
  padding: 0 0;
  margin: 0 0;
  display:block;
  background: #777;
  color: #FFF;
  content: ' CSS';
  width: inherit;
  position: relative;
}

※ contentプロパティの所と、data-lang=css の=以降の部分が対応言語です。CSSの属性セレクタに記述する言語名は前掲のヘルプページのように、小文字にしておけばいいようにおもいますが、他の言語を細かくチェックしてませんので、都度、ブラウザのインスペクタで要素を確認すれば確実です。
※ あと、テーマの preのスタイルにもよるので、調整が必要です。

広告を非表示にする