WEBデザインDTPデザイン個人レッスン

イラストレーターの家庭教師で勉強しよう

DTPデザイナーWEBデザイナーココフラッはデザイン制作や個人レッスンをご提供。自由な時間に東京カフェや会社ご自宅でグラフィックソフト、イラストレーターやフォトショップ、ワードプレスやホームページ制作の勉強、マンツーマンの個人指導でスキルアップ。
初回無料体験レッスン! Skypeレッスンは全国対応

  • Photoshop
  • Illustrator
  • Dreamweaver
  • Wordpress
  • Html+css

人気のコンテンツ

ワードプレステーマをカスタマイズの学校
ウェブ作成の指導は女性出張講師
ウェブ作成教室で勉強するならデザイン教室
初心者入門講座の個人レッスンデザイン教室

シンタックスハイライトライブラリ「highlight.js」CSS カスタマイズ

jQuery不要の軽量コードハイライト「highlight.js」はとても便利ですが、殺風景な感じだったので、左上に言語を出カするようにしようかと思います。
ソースコードごとの言語を出すようにするとわかりやすくなるので、左上に言語の種類を表示するようにCSSを書いていきます。
*highlight.jsの標準機能にはありません

変更前
html&cssコーディングプログラミングの家庭教師マンツーマンで教える対面レッスンwebデザイナーやプログラマーにとは

変更後  言語PHPがパープルで左上表示に
javascriptやjquery、PHPの家庭教師個人レッスン講師対面レッスン基礎講座教室


 
Googleデベロッパーツールで確認すると、 「.hljs」が付与されているので、.hljsと、言語ごとのクラス名をつけます
.php (言語ごとのクラス名)だけで心配なら .php.hljs (言語ごとのクラス名プラス.hljs)まで指定し、::before擬似クラスを使います。


.hljs {
  position: relative;
  padding: 40px 12px 12px;
}
.hljs::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  color: #fff;
  font-weight: bold;
  padding: 1px 7px;
}
.hljs.html::before {
  content: 'HTML';
  background-color: #006eb9;
}
.hljs.css::before {
  content: 'CSS';
  background-color: #e44d26;
}
.hljs.javascript::before {
  content: 'JavaScript';
  background-color: #DBCC33;
}
.hljs.php::before {
  content: 'PHP';
  background-color: #8D78E9;
}
.hljs.sql::before {
  content: 'SQL';
  background-color: #E68EC7;
}

 

 

check!

お問い合わせはこちらからどうぞ
レッスンについてはこちらからどうぞ