highlight.jsの使い方
ソースコードを自動で判別してハイライト表示をしてくれるhighlight.js(Javascriptライブラリ)の使い方です。
1.ダウンロード
まずは公式サイトからライブラリをダウンロードします。
ダウンロードする時には使用する言語が選択できますので必要な言語パックにチェックを入れましょう。
https://highlightjs.org/
2.環境設定
ダウンロードしましたら、次は自分の環境にアップロードします。
3.使用方法
初期設定は8,9,22行目で必須項目となります。8,9行目でCSS/JSファイルの読み込み、22行目でハイライトの事項です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <link rel="stylesheet" href="./highlight/styles/default.css" type="text/css" /> <script type="text/javascript" src="./highlight/highlight.pack.js"></script> </head> <body> <pre><code> // 数字チェック function isNumeric($str){ if (preg_match("/^[0-9]+$/",$str)) { return TRUE; } else { return FALSE; } } </code></pre> <script>hljs.initHighlightingOnLoad();</script> </body> </html>
ハイライトさせるにはpreタグの中にcodeタグが必要ですので忘れずに。
ハイライトさせる言語を指定する
基本的に言語を自動判別しますが不具合などで言語を指定したい場合は下記のようにすればOKです。
<pre><code class="php"> // 数字チェック function isNumeric($str){ if (preg_match("/^[0-9]+$/",$str)) { return TRUE; } else { return FALSE; } } </code></pre>
注意事項
このブログではソースコードのハイライトは「Google-Code-Prettify」を使用しています。Google-Code-Prettifyの使用方法はこちらからどうぞ :-)
スポンサーリンク
関連記事
- Waveファイルの音声を切り取る [WAVE.js]
- 画像を高品質に減色する「MedianCut.js」の使い方[公式]
- Bootstrapのカード型(card-columns、card-group、card-deck、card)だけを使用する [抽出]
- EXE/DLLなどのエキスポート情報をCSVに変換する[iResEditor.js]
- Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. のエラー回避方法
公開日:2015年01月15日
記事NO:00115
この記事を書いた人
![]() | 💻 ITスキル・経験 サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。 画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ |
プチモンテ代表、アーティスト名:プチモンテ | |
🎵 音楽制作 BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は叙情詩、叙情的な楽曲が多い。楽曲制作は2023年12月中旬 ~ |
オリジナル曲を始めました✨
YouTubeで各楽曲を公開しています🌈
https://www.youtube.com/@petitmonte