HTML,CSS,Javascript,PHPを中心に、WEB制作時に忘れがちなTipsを紹介など。
Web制作関連のTipsなんかも書いていこうかと思う今日このごろなんですが、コードハイライト導入していなかったので、この記事を書きがてらjavascriptのコードハイライトライブラリ「highlight.js」を導入してみます。
「https://highlightjs.org/download/」にアクセスして任意の方法でライブラリを導入しましょう。cdnjsで導入するのが手っ取り早いですが、おっさんはカスタムパッケージをダウンロードしました。特に意味はありません。
ライブらいを読み込んだら、任意の箇所で以下のスクリプトを実行しましょう。
<script>hljs.highlightAll();</script>
以上で導入完了です。
コードを記載する場合は以下のタグ構成で記述を行ないます。
<pre>
<code class="html">
ココになにからしらのコードを記述する。
</code>
</pre>
上記はHTMLのハイライトを行う場合のサンプルです。
クラス名の箇所にハイライトする言語名を書けばいいぽい。
ハイライトする色の変更はCSSで変更します。
上記は「atelier-cave-light.css」を設定してみました。
まずはHTML
<!-- これはHTMLです。 -->
<div>
<a href="#"><span>リンクのテキスト</span></a>
</div>
続いてCSS
.container
{
display:flex;
flex-direction:row;
flex-wrap:wrap ;
justify-content:flex-start;
align-items:stretch;
align-content:stretch;
}
そしてjavascript
__(function(){
$('code').wrap('<pre>');
hljs.highlightAll();
});
最後にPHP
namespace Model;
class Msample extends DBModel
{
protected $_table = 'sample';
protected $_alias = 'smpl';
protected $_pk = 'id';
public function get()
{
/* ここに処理を記述する */
}
}