ブログをカスタマイズするとなると、HTMLやCSSをいじったりJavascript等を追加したりするわけですが、そのソースコードを綺麗でシンプルに、かつ動作も軽くお手軽にブログ等のウェブサイトに載せる事が出来るのがこの「highlight.js」です。今回は導入方法から、書き方までなるべくわかりやすくご紹介出来ればと思います。
導入方法
こちらが「highlight.js」のウェブサイトになります。https://highlightjs.org/
body部分に3行のコードを貼る
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/github.min.css"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script></body>コードの読み込みが遅いと感じたら
<head>デザインの変更
一行目にある「github」という部分を変えるとデザインが変わります。このままだとこのブログと同じデザインになりますが、他のデザインを見てみたい方は、こちらがわかりやすかったのでご覧になってみてください。全スタイルのサンプル付き！動作が軽快なシンタックスハイライター「highlight.js」
記載方法
<pre><code>ここに内容</code></pre>上手く表示されない場合はHTMLエスケープしよう
CSSははそのまま突っ込めば表示されるのですが、HTMLやJavascript等は書き方によっては上手くコードを表示してくれません。なのでコチラのサイト等でコードを変換したものを、上記の「ここに内容」部分にコピペすれば上手く表示されると思います。『上手く表示されないよ！』と思ったら変換してみると幸せになれる事でしょう。HTML特殊文字変換ツール
DEMO
HTML
※変換必要<div class= "好きな人の名前" >ここに内容</div>CSS
※変換必要無しh6 {
border-left: solid 4px #E5E5E5;
font-size: 24px;
border-radius: 2px;
padding: 5px 0px 5px 14px;
margin: 24px -2px 14px -2px;
}Javascript
※変換必要 「script」のタグがHTMLなので。<script type='text/javascript'>
jQuery(function($) {
var nav = $('#HTML8'),
offset = nav.offset();
$(window).scroll(function () {
if($(window).scrollTop() > offset.top - 55) {
nav.addClass('fixed2');
} else {
nav.removeClass('fixed2');
}
});
});
</script>※変換必要無し
$(function() {
$('.ttt2 li').click(function() {
var tabnum = $('.ttt2 li').index(this);
$('.ccc2 div').css('display','none');
$('.ccc2 div').eq(tabnum).css('display','block');
$('.ttt2 li').removeClass('sss2');
$(this).addClass('sss2')
});
});
.png)
.png)
.png)
