概要
google/code-prettify はソースコードなどを含むブログやページを公開するときにキレイに色付けしてくれる JavaScript ライブラリです
今回は導入方法を紹介します
環境
- code-prettify 2018/11/26 時点
使ってみる
- vim index.html
<html>
<head>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
</head>
<body>
<pre class="prettyprint lang-rb">
require 'sinatra'
class MyApp < Sinatra::Base
get '/' do
erb :index
end
end
</pre>
</body>
</html>
1 行 JavaScript を読み込みます
そして <pre> タグで囲んで class に prettyprint を指定すれば OK です
言語を指定することができます
上記の場合は Ruby のコードなので lang-rb と指定しています
他にも "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl" などが指定できます
HTML5 の場合は code タグを使っても OK です
<pre class="prettyprint">
<code class="language-rb">
require 'sinatra'
class MyApp < Sinatra::Base
get '/' do
erb :index
end
end
</code>
</pre>スキンを適用する
JavaScript を参照する際にパラメータを付与することでスキンを適用することができます
使えるスキンはこちらにあります
例えば「desert」を使う場合は以下のようにします
<html>
<head>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>
<!-- <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> -->
</head>
<body>
<pre class="prettyprint lang-rb">
require 'sinatra'
class MyApp < Sinatra::Base
get '/' do
erb :index
end
end
</pre>
</body>
</html>
こんな感じで色合いが変わります
行数を表示する
左に行数を表示することもできます
linenums クラスを指定します
<html>
<head>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>
</head>
<body>
<pre class="prettyprint lang-rb linenums">
require 'sinatra'
class MyApp < Sinatra::Base
get '/' do
erb :index
end
end
</pre>
</body>
</html>
5 行ごとに表示してくれます
途中から行番号を振りたい場合は linums:30 とすれば数字が 30 から始まります
最後に
google/code-prettify の使いかたを紹介しました
最近だとブログサービスなどはデフォルトでコードハイライト機能があるのである場合はそれを使うと良いと思います
自分でサイトを運営していたりする場合には導入してみると良いかなと思います
0 件のコメント:
コメントを投稿