こんにちは！
今日も頑張ろう

WebParts-9
シンタックスハイライト

P9.1 はじめに

P9.1.1 概要

シンタックスハイライトは、ソースコードを構文規則に従って色分けして表示する機能です。

P9.2 シンタックスハイライト

P9.2.1 highlight（基本形）

(1) 説明

highlight.js プラグインを使用したソースコードハイライトです。
読み込んだソースコードを自動判定してハイライト表示を行います。

(2) 表示形式

各ソースコードのハイライト表示を確認してください。

別画面で表示

(3) 使用機能

JavaScript

使用しません。

jQuery

使用しません。

個別ライブラリィ

コードハイライト（highlight.js）
公式サイト：highlight.js（https://highlightjs.org/）
CDN（JS）：https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js
CDN（CSS）：https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css

(4) 実装手順

highlight.js の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「Get version x.x.x」ボタンをクリックしてダウンロードしてください。CDN を利用する場合は、本作業は不要です。
「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
head タグ内に「agate.min.css」の link タグ（※1）を記述してください。
スタイル定義（※2）をスタイルシート（CSS）ファイルに記述してください。最大の横幅指定は、作成するサイトに合わせて変更してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート（CSS）ファイルに記述してください。
HTML ファイルの対象領域に表示定義（※3）を記述してください。
head タグ内に動作指示スクリプト（※4）を記述してください。

(5) サンプルコード

サンプルコード表示

(a) ファイル配置

09-syntaxhilight/21-highlight-1
- index.html
- css
  - agate.min.css
- js
  - highlight.min.js

(b) ソースコード

HTML（index.html）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ソースコードハイライト（highight）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link rel="stylesheet" href="css/agate.min.css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- ソースコードハイライト（highight）の制御 -->
<script src="js/highlight.min.js"></script>
<script>
	hljs.initHighlightingOnLoad();
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
h1 {
	font-size: 1.4rem;
}
@media screen and (max-width: 760px) {
	h1 {
		font-size: 1.0rem;
	}
}
h2 {
	font-size: 1.2rem;
}
@media screen and (max-width: 760px) {
	h2 {
		font-size: 1.0rem;
	}
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* ソースコードハイライト（highight）の設定 */
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}
pre {
	line-height: 1.4em;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- ソースコードハイライト（highight）の定義 -->
	<div class="wrapper">
		<h1>highightサンプル（初期状態）</h1>
		<h2>HTML</h2>
		<pre><code>
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;HTMLサンプル&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;ul&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
	&lt;/ul&gt;
	&lt;hr&gt;
	&lt;ol&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
	&lt;/ol&gt;
	&lt;hr&gt;
	&lt;dl&gt;
		&lt;dt&gt;（説明する言葉）&lt;/dt>&lt;dd&gt;（説明文）&lt;/dd&gt;
		&lt;dt&gt;（説明する言葉）&lt;/dt>&lt;dd&gt;（説明文）&lt;/dd&gt;
	&lt;/dl&gt;
&lt;/body&gt;
&lt;/html&gt;
		</code></pre>
		<h2>CSS</h2>
		<pre><code>

ul {
	padding: 0;
	margin: 0;
}
.container {
	max-width: 960px;
	margin: 20px auto;
}
#slide {
	max-width: 640px;
	margin: 0 auto;
	list-style-type: none;
}
#slide ul {
	position: relative;
	width: 100%;
	list-style-type: none;
}
#slide ul li {
	position: absolute;
	left: 0;
	top: 0;
}
		</code></pre>
		<h2>JavaScript</h2>
		<pre><code>

function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
         ' class=""';
  } catch (e) {
  /* handle exception */
  }
  for (var i = 0 / 2; i &lt; classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}
		</code></pre>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>

</body>
</html>

P9.2.2 highlight（種別付）

(1) 説明

highlight.js プラグインを使用したソースコードハイライトです。
ファイル種別のタグ表示機能を追加しました。

(2) 表示形式

各ソースコードのハイライト表示を確認してください。

別画面で表示

(3) 使用機能

JavaScript

使用しません。

jQuery

使用しません。

個別ライブラリィ

コードハイライト（highlight.js）
公式サイト：highlight.js（https://highlightjs.org/）
CDN（JS）：https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js
CDN（CSS）：https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css

(4) 実装手順

highlight.js の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「Get version x.x.x」ボタンをクリックしてダウンロードしてください。CDN を利用する場合は、本作業は不要です。
「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
head タグ内に「agate.min.css」の link タグ（※1）を記述してください。
スタイル定義（※2）をスタイルシート（CSS）ファイルに記述してください。最大の横幅指定は、作成するサイトに合わせて変更してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート（CSS）ファイルに記述してください。
HTML ファイルの対象領域に表示定義（※3）を記述してください。
head タグ内に動作指示スクリプト（※4）を記述してください。

(5) サンプルコード

サンプルコード表示

(a) ファイル配置

09-syntaxhilight/22-highlight-2
- index.html
- css
  - agate.min.css
- js
  - highlight.min.js

(b) ソースコード

HTML（index.html）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ソースコードハイライト（highight）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link rel="stylesheet" href="css/agate.min.css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- ソースコードハイライト（highight）の制御 -->
<script src="js/highlight.min.js"></script>
<script>
	hljs.initHighlightingOnLoad();
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
h1 {
	font-size: 1.4rem;
	padding-left: 10px;
	padding-bottom: 10px;
}
@media screen and (max-width: 760px) {
	h1 {
		font-size: 1.0rem;
	}
}
h2 {
	font-size: 1.2rem;
	padding-left: 10px;
}
@media screen and (max-width: 760px) {
	h2 {
		font-size: 1.0rem;
	}
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* ソースコードハイライト（highight）の設定 */
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}
pre {
	position: relative;
	margin-bottom: 1em;
	line-height: 1.4em;
	tab-size: 4;
}
pre span.tag {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1.2rem;
	color: #fff;
	font-weight: bold;
	line-height: 1.8;
	padding: 0 15px;
	margin: 0;
}
pre span.html {
	background-color: #0c92a5;
}
pre span.css {
	background-color: #07a056;
}
pre span.javascript {
	background-color: #d44747;
}
pre span.jquery {
	background-color: #c74690;
}
pre code.code {
	padding: 1em 2em;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- ソースコードハイライト（highight）の定義 -->
	<div class="wrapper">
		<h1>highightサンプル（種別表示追加）</h1>
		<h2>HTML</h2>
		<pre><span class="tag html">HTML</span><code class="code">

&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;HTMLサンプル&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;ul&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
	&lt;/ul&gt;
	&lt;hr&gt;
	&lt;ol&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
	&lt;/ol&gt;
	&lt;hr&gt;
	&lt;dl&gt;
		&lt;dt&gt;（説明する言葉）&lt;/dt>&lt;dd&gt;（説明文）&lt;/dd&gt;
		&lt;dt&gt;（説明する言葉）&lt;/dt>&lt;dd&gt;（説明文）&lt;/dd&gt;
	&lt;/dl&gt;
&lt;/body&gt;
&lt;/html&gt;
		</code></pre>
		<h2>CSS</h2>
		<pre><span class="tag css">CSS</span><code class="code">

ul {
	padding: 0;
	margin: 0;
}
.container {
	max-width: 960px;
	margin: 20px auto;
}
#slide {
	max-width: 640px;
	margin: 0 auto;
	list-style-type: none;
}
#slide ul {
	position: relative;
	width: 100%;
	list-style-type: none;
}
#slide ul li {
	position: absolute;
	left: 0;
	top: 0;
}
		</code></pre>
		<h2>JavaScript</h2>
		<pre><span class="tag javascript">JavaScript</span><code class="code">

function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
         ' class=""';
  } catch (e) {
  /* handle exception */
  }
  for (var i = 0 / 2; i &lt; classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}
		</code></pre>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>

</body>
</html>

P9.2.3 highlight（折り込み）

(1) 説明

highlight.js プラグインを使用したソースコードハイライトです。
折り込み機能を追加しました。

(2) 表示形式

折り込みの閉開を行って各ソースコードのハイライト表示を確認してください。

別画面で表示

(3) 使用機能

JavaScript

使用しません。

jQuery

使用しません。

個別ライブラリィ

コードハイライト（highlight.js）
公式サイト：highlight.js（https://highlightjs.org/）
CDN（JS）：https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js
CDN（CSS）：https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css

(4) 実装手順

highlight.js の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「Get version x.x.x」ボタンをクリックしてダウンロードしてください。CDN を利用する場合は、本作業は不要です。
「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
head タグ内に「agate.min.css」の link タグ（※1）を記述してください。
スタイル定義（※2）をスタイルシート（CSS）ファイルに記述してください。最大の横幅指定は、作成するサイトに合わせて変更してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート（CSS）ファイルに記述してください。
HTML ファイルの対象領域に表示定義（※3）を記述してください。
head タグ内に動作指示スクリプト（※4）を記述してください。

(5) サンプルコード

サンプルコード表示

(a) ファイル配置

09-syntaxhilight/23-highlight-3
- index.html
- css
  - jquery.bxslider.css
- images
  - bx_loader.gif
  - controls.png
  - sample-01.jpg
  - sample-02.jpg
  - sample-03.jpg
  - sample-04.jpg
  - sample-05.jpg
- js
  - jquery.bxslider.min.js
  - jquery-3.6.0.min.js

(b) ソースコード

HTML（index.html）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ソースコードハイライト（highight）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link rel="stylesheet" href="css/agate.min.css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- ソースコードハイライト（highight）の制御 -->
<script src="js/highlight.min.js"></script>
<script>
	hljs.initHighlightingOnLoad();
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
h1 {
	font-size: 1.4rem;
	padding-left: 10px;
	padding-bottom: 10px;
}
@media screen and (max-width: 760px) {
	h1 {
		font-size: 1.0rem;
	}
}
h2 {
	font-size: 1.2rem;
	padding-left: 10px;
}
@media screen and (max-width: 760px) {
	h2 {
		font-size: 1.0rem;
	}
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* ソースコードハイライト（highight）の設定 */
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}
details summary {
	width: 200px;
	font-size: 1.2em;
	line-height: 2.6;
	text-align: center;
	padding: 0 1.5em;
	margin: 1em 0;
	color: #fff;
	background-color: #336699;
	border-radius: 1.3em;
}
@media screen and (max-width: 760px) {
	details summary {
		font-size: 1.0em;
	}
}
details summary:hover {
	cursor: pointer;
	opacity: 0.6;
}
pre {
	position: relative;
	margin-bottom: 1em;
	line-height: 1.4em;
	tab-size: 4;
}
pre span.tag {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1.2rem;
	color: #fff;
	font-weight: bold;
	line-height: 1.8;
	padding: 0 15px;
	margin: 0;
}
pre span.html {
	background-color: #0c92a5;
}
pre span.css {
	background-color: #07a056;
}
pre span.javascript {
	background-color: #d44747;
}
pre span.jquery {
	background-color: #c74690;
}
pre code.code {
	padding: 1em 2em;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- ソースコードハイライト（highight）の定義 -->
	<div class="wrapper">
		<h1>highightサンプル（折り畳み機能追加）</h1>
		<details>
			<summary>ソースコード表示</summary>
			<h2>HTML</h2>
			<pre><span class="tag html">HTML</span><code class="code">

&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;HTMLサンプル&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;ul&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
	&lt;/ul&gt;
	&lt;hr&gt;
	&lt;ol&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
	&lt;/ol&gt;
	&lt;hr&gt;
	&lt;dl&gt;
		&lt;dt&gt;（説明する言葉）&lt;/dt>&lt;dd&gt;（説明文）&lt;/dd&gt;
		&lt;dt&gt;（説明する言葉）&lt;/dt>&lt;dd&gt;（説明文）&lt;/dd&gt;
	&lt;/dl&gt;
&lt;/body&gt;
&lt;/html&gt;
			</code></pre>
			<h2>CSS</h2>
			<pre><span class="tag css">CSS</span><code class="code">

ul {
	padding: 0;
	margin: 0;
}
.container {
	max-width: 960px;
	margin: 20px auto;
}
#slide {
	max-width: 640px;
	margin: 0 auto;
	list-style-type: none;
}
#slide ul {
	position: relative;
	width: 100%;
	list-style-type: none;
}
#slide ul li {
	position: absolute;
	left: 0;
	top: 0;
}
			</code></pre>
			<h2>JavaScript</h2>
			<pre><span class="tag javascript">JavaScript</span><code class="code">

function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
         ' class=""';
  } catch (e) {
  /* handle exception */
  }
  for (var i = 0 / 2; i &lt; classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}
			</code></pre>
		</details>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>

</body>
</html>

P9.2.4 Prism（基本形）

(1) 説明

Prism.js プラグインを使用したソースコードハイライトです。
豊富なオプション（行番号表示、Copyボタンなど）を持っています。

(2) 表示形式

各ソースコードのハイライト表示を確認してください。

別画面で表示

(3) 使用機能

JavaScript

使用しません。

jQuery

使用しません。

個別ライブラリィ

コードハイライト（Prism.js）
公式サイト：Prism.js（https://prismjs.com/）
CDN（オプション機能により選択）：https://cdnjs.com/libraries/prism

(4) 実装手順

Prism.js の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「DOWNLOAD」ボタンをクリックして必要条件をチェック後に「DOWNLOAD JS」と「DOWNLOAD CSS」ボタンをクリックして js ファイルと css ファイルをダウンロードしてください。CDN を利用する場合は、本作業は不要です。
「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
head タグ内に「prism.css」の link タグ（※1）を記述してください。
スタイル定義（※2）をスタイルシート（CSS）ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート（CSS）ファイルに記述してください。
HTML ファイルの対象領域に表示定義（※3）を記述してください。
head タグ内に動作指示スクリプト（※4）を記述してください。

(5) サンプルコード

サンプルコード表示

(a) ファイル配置

09-syntaxhilight/24-prism-1
- index.html
- css
  - prism.css
- js
  - prism.js

(b) ソースコード

HTML（index.html）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ソースコードハイライト（prism）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link rel="stylesheet" href="css/prism.css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<script src="js/prism.js"></script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
h1 {
	font-size: 1.4rem;
	padding-left: 10px;
	padding-bottom: 10px;
}
@media screen and (max-width: 760px) {
	h1 {
		font-size: 1.0rem;
	}
}
h2 {
	font-size: 1.2rem;
	padding-left: 10px;
}
@media screen and (max-width: 760px) {
	h2 {
		font-size: 1.0rem;
	}
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* ソースコードハイライト（prism）の設定 */
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}
div.container div.wrapper pre,
div.container div.wrapper pre code {
	line-height: 1.4em;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- ソースコードハイライト（prism）の定義 -->
	<div class="wrapper">
		<h1>prismサンプル（初期値状態）</h1>
		<h2>言語設定：language-html</h2>
		<pre class="line-numbers"><code class="language-html">
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;HTMLサンプル&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;ul&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
	&lt;/ul&gt;
	&lt;hr&gt;
	&lt;ol&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
	&lt;/ol&gt;
	&lt;hr&gt;
	&lt;dl&gt;
		&lt;dt&gt;（説明する言葉）&lt;/dt>&lt;dd&gt;（説明文）&lt;/dd&gt;
		&lt;dt&gt;（説明する言葉）&lt;/dt>&lt;dd&gt;（説明文）&lt;/dd&gt;
	&lt;/dl&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
		<h2>言語設定：language-css</h2>
		<pre class="line-numbers"><code class="language-css">
ul {
	padding: 0;
	margin: 0;
}
.container {
	max-width: 960px;
	margin: 20px auto;
}
#slide {
	max-width: 640px;
	margin: 0 auto;
	list-style-type: none;
}
#slide ul {
	position: relative;
	width: 100%;
	list-style-type: none;
}
#slide ul li {
	position: absolute;
	left: 0;
	top: 0;
}
</code></pre>
		<h2>言語設定：language-javascript</h2>
		<pre class="line-numbers"><code class="language-javascript">
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
         ' class=""';
  } catch (e) {
  /* handle exception */
  }
  for (var i = 0 / 2; i &lt; classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}
</code></pre>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>

</body>
</html>

P9.2.5 Prism（種別付）

(1) 説明

Prism.js プラグインを使用したソースコードハイライトです。
ファイル種別表示機能を追加しました。

(2) 表示形式

各ソースコードのハイライト表示を確認してください。

別画面で表示

(3) 使用機能

JavaScript

使用しません。

jQuery

使用しません。

個別ライブラリィ

コードハイライト（Prism.js）
公式サイト：Prism.js（https://prismjs.com/）
CDN（オプション機能により選択）：https://cdnjs.com/libraries/prism

(4) 実装手順

Prism.js の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「DOWNLOAD」ボタンをクリックして必要条件をチェック後に「DOWNLOAD JS」と「DOWNLOAD CSS」ボタンをクリックして js ファイルと css ファイルをダウンロードしてください。CDN を利用する場合は、本作業は不要です。
「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
head タグ内に「prism.css」の link タグ（※1）を記述してください。
スタイル定義（※2）をスタイルシート（CSS）ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート（CSS）ファイルに記述してください。
HTML ファイルの対象領域に表示定義（※3）を記述してください。
head タグ内に動作指示スクリプト（※4）を記述してください。

(5) サンプルコード

サンプルコード表示

(a) ファイル配置

09-syntaxhilight/25-prism-2
- index.html
- css
  - prism.css
- js
  - prism.js

(b) ソースコード

HTML（index.html）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ソースコードハイライト（prism）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link rel="stylesheet" href="css/prism.css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<script src="js/prism.js"></script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
h1 {
	font-size: 1.4rem;
	padding-left: 10px;
	padding-bottom: 10px;
}
@media screen and (max-width: 760px) {
	h1 {
		font-size: 1.0rem;
	}
}
h2 {
	font-size: 1.2rem;
	padding-left: 10px;
}
@media screen and (max-width: 760px) {
	h2 {
		font-size: 1.0rem;
	}
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* ソースコードハイライト（prism）の設定 */
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}
div.container div.wrapper pre,
div.container div.wrapper pre code {
	line-height: 1.4em;
}
p[class*="label-"] {
    display: inline-block;
    line-height: 2;
	padding: 0 1.5em;
	margin: 0;
    color: #fff;
}
p.label-html {
    background-color: #0c92a5;
}
p.label-css {
    background-color: #07a056;
}
p.label-javascript {
    background-color: #d44747;
}
pre[class*="language-"] {
	margin: 0 0 10px 0;
    border-radius: 0;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- ソースコードハイライト（prism）の定義 -->
	<div class="wrapper">
		<h1>prismサンプル（種別表示機能追加）</h1>
		<h2>言語設定：language-html</h2>
		<p class="label-html">HTML</p>
		<pre class="line-numbers"><code class="language-html">
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;HTMLサンプル&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;ul&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
	&lt;/ul&gt;
	&lt;hr&gt;
	&lt;ol&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
	&lt;/ol&gt;
	&lt;hr&gt;
	&lt;dl&gt;
		&lt;dt&gt;（説明する言葉）&lt;/dt>&lt;dd&gt;（説明文）&lt;/dd&gt;
		&lt;dt&gt;（説明する言葉）&lt;/dt>&lt;dd&gt;（説明文）&lt;/dd&gt;
	&lt;/dl&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
		<h2>言語設定：language-css</h2>
		<p class="label-css">CSS</p>
		<pre class="line-numbers"><code class="language-css">
ul {
	padding: 0;
	margin: 0;
}
.container {
	max-width: 960px;
	margin: 20px auto;
}
#slide {
	max-width: 640px;
	margin: 0 auto;
	list-style-type: none;
}
#slide ul {
	position: relative;
	width: 100%;
	list-style-type: none;
}
#slide ul li {
	position: absolute;
	left: 0;
	top: 0;
}
</code></pre>
		<h2>言語設定：language-javascript</h2>
		<p class="label-javascript">JavaScript</p>
		<pre class="line-numbers"><code class="language-javascript">
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
         ' class=""';
  } catch (e) {
  /* handle exception */
  }
  for (var i = 0 / 2; i &lt; classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}
</code></pre>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>

</body>
</html>

P9.2.6 Prism（折り込み）

(1) 説明

Prism.js プラグインを使用したソースコードハイライトです。
折り込み機能を追加しました。

(2) 表示形式

折り込みの閉開を行って各ソースコードのハイライト表示を確認してください。

別画面で表示

(3) 使用機能

JavaScript

使用しません。

jQuery

使用しません。

個別ライブラリィ

コードハイライト（Prism.js）
公式サイト：Prism.js（https://prismjs.com/）
CDN（オプション機能により選択）：https://cdnjs.com/libraries/prism

(4) 実装手順

Prism.js の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「DOWNLOAD」ボタンをクリックして必要条件をチェック後に「DOWNLOAD JS」と「DOWNLOAD CSS」ボタンをクリックして js ファイルと css ファイルをダウンロードしてください。CDN を利用する場合は、本作業は不要です。
「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
head タグ内に「prism.css」の link タグ（※1）を記述してください。
スタイル定義（※2）をスタイルシート（CSS）ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート（CSS）ファイルに記述してください。
HTML ファイルの対象領域に表示定義（※3）を記述してください。
head タグ内に動作指示スクリプト（※4）を記述してください。

(5) サンプルコード

サンプルコード表示

(a) ファイル配置

09-syntaxhilight/26-prism-3
- index.html
- css
  - prism.css
- js
  - prism.js

(b) ソースコード

HTML（index.html）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ソースコードハイライト（prism）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link rel="stylesheet" href="css/prism.css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<script src="js/prism.js"></script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
h1 {
	font-size: 1.4rem;
	padding-left: 10px;
	padding-bottom: 10px;
}
@media screen and (max-width: 760px) {
	h1 {
		font-size: 1.0rem;
	}
}
h2 {
	font-size: 1.2rem;
	padding-left: 10px;
}
@media screen and (max-width: 760px) {
	h2 {
		font-size: 1.0rem;
	}
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* ソースコードハイライト（prism）の設定 */
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}
div.container div.wrapper pre,
div.container div.wrapper pre code {
	line-height: 1.4em;
}
details summary {
	width: 200px;
	font-size: 1.2em;
	line-height: 2.6;
	text-align: center;
	padding: 0 1.5em;
	margin: 1em 0;
	color: #fff;
	background-color: #336699;
	border-radius: 1.3em;
}
@media screen and (max-width: 760px) {
	details summary {
		font-size: 1.0em;
	}
}
details summary:hover {
	cursor: pointer;
	opacity: 0.6;
}
p[class*="label-"] {
    display: inline-block;
    line-height: 2;
	padding: 0 1.5em;
	margin: 0;
    color: #fff;
}
p.label-html {
    background-color: #0c92a5;
}
p.label-css {
    background-color: #07a056;
}
p.label-javascript {
    background-color: #d44747;
}
pre[class*="language-"] {
	margin: 0 0 10px 0;
    border-radius: 0;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- ソースコードハイライト（prism）の定義 -->
	<div class="wrapper">
		<h1>prismサンプル（折り畳み機能追加）</h1>
		<details>
			<summary>ソースコード表示</summary>
			<h2>言語設定：language-html</h2>
			<p class="label-html">HTML</p>
			<pre class="line-numbers"><code class="language-html">
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;HTMLサンプル&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;ul&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
	&lt;/ul&gt;
	&lt;hr&gt;
	&lt;ol&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
	&lt;/ol&gt;
	&lt;hr&gt;
	&lt;dl&gt;
		&lt;dt&gt;（説明する言葉）&lt;/dt>&lt;dd&gt;（説明文）&lt;/dd&gt;
		&lt;dt&gt;（説明する言葉）&lt;/dt>&lt;dd&gt;（説明文）&lt;/dd&gt;
	&lt;/dl&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
			<h2>言語設定：language-css</h2>
			<p class="label-css">CSS</p>
			<pre class="line-numbers"><code class="language-css">
ul {
	padding: 0;
	margin: 0;
}
.container {
	max-width: 960px;
	margin: 20px auto;
}
#slide {
	max-width: 640px;
	margin: 0 auto;
	list-style-type: none;
}
#slide ul {
	position: relative;
	width: 100%;
	list-style-type: none;
}
#slide ul li {
	position: absolute;
	left: 0;
	top: 0;
}
</code></pre>
			<h2>言語設定：language-javascript</h2>
			<p class="label-javascript">JavaScript</p>
			<pre class="line-numbers"><code class="language-javascript">
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
         ' class=""';
  } catch (e) {
  /* handle exception */
  }
  for (var i = 0 / 2; i &lt; classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}
</code></pre>
		</details>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>

</body>
</html>

P9.2.7 Prism（色変更）

(1) 説明

Prism.js プラグインを使用したソースコードハイライトです。
表示色のカスタマイズをしました。

(2) 表示形式

折り込みの閉開を行って各ソースコードのハイライト表示を確認してください。

別画面で表示

(3) 使用機能

JavaScript

使用しません。

jQuery

使用しません。

個別ライブラリィ

コードハイライト（Prism.js）
公式サイト：Prism.js（https://prismjs.com/）
CDN（オプション機能により選択）：https://cdnjs.com/libraries/prism

(4) 実装手順

Prism.js の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「DOWNLOAD」ボタンをクリックして必要条件をチェック後に「DOWNLOAD JS」と「DOWNLOAD CSS」ボタンをクリックして js ファイルと css ファイルをダウンロードしてください。CDN を利用する場合は、本作業は不要です。
「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
head タグ内に「prism.css」の link タグ（※1）を記述してください。
スタイル定義（※2）をスタイルシート（CSS）ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート（CSS）ファイルに記述してください。
HTML ファイルの対象領域に表示定義（※3）を記述してください。
head タグ内に動作指示スクリプト（※4）を記述してください。

(5) サンプルコード

サンプルコード表示

(a) ファイル配置

09-syntaxhilight/27-prism-4
- index.html
- css
  - prism.css
- js
  - prism.js

(b) ソースコード

HTML（index.html）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ソースコードハイライト（prism）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link rel="stylesheet" href="css/prism.css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<script src="js/prism.js"></script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
h1 {
	font-size: 1.4rem;
	padding-left: 10px;
	padding-bottom: 10px;
}
@media screen and (max-width: 760px) {
	h1 {
		font-size: 1.0rem;
	}
}
h2 {
	font-size: 1.2rem;
	padding-left: 10px;
}
@media screen and (max-width: 760px) {
	h2 {
		font-size: 1.0rem;
	}
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* ソースコードハイライト（prism）の設定 */
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}
div.container div.wrapper pre,
div.container div.wrapper pre code {
	line-height: 1.4em;
}
details summary {
	width: 200px;
	font-size: 1.2em;
	line-height: 2.6;
	text-align: center;
	padding: 0 1.5em;
	margin: 1em 0;
	color: #fff;
	background-color: #336699;
	border-radius: 1.3em;
}
@media screen and (max-width: 760px) {
	details summary {
		font-size: 1.0em;
	}
}
details summary:hover {
	cursor: pointer;
	opacity: 0.6;
}
p[class*="label-"] {
    display: inline-block;
    line-height: 2;
	padding: 0 1.5em;
	margin: 0;
    color: #fff;
}
p.label-html {
    background-color: #0c92a5;
}
p.label-css {
    background-color: #07a056;
}
p.label-javascript {
    background-color: #d44747;
}
pre[class*="language-"] {
	margin: 0 0 10px 0;
    border-radius: 0;
}
/* 表示色カスタマイズ */
.token.property, .token.tag, .token.constant, .token.symbol, .token.deleted {
    color: #62ffcc;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- ソースコードハイライト（prism）の定義 -->
	<div class="wrapper">
		<h1>prismサンプル（表示色変更）</h1>
		<details>
			<summary>ソースコード表示</summary>
			<h2>言語設定：language-html</h2>
			<p class="label-html">HTML</p>
			<pre class="line-numbers"><code class="language-html">
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;HTMLサンプル&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;ul&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
	&lt;/ul&gt;
	&lt;hr&gt;
	&lt;ol&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
		&lt;li&gt;（リスト要素）&lt;/li&gt;
	&lt;/ol&gt;
	&lt;hr&gt;
	&lt;dl&gt;
		&lt;dt&gt;（説明する言葉）&lt;/dt>&lt;dd&gt;（説明文）&lt;/dd&gt;
		&lt;dt&gt;（説明する言葉）&lt;/dt>&lt;dd&gt;（説明文）&lt;/dd&gt;
	&lt;/dl&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
			<h2>言語設定：language-css</h2>
			<p class="label-css">CSS</p>
			<pre class="line-numbers"><code class="language-css">
ul {
	padding: 0;
	margin: 0;
}
.container {
	max-width: 960px;
	margin: 20px auto;
}
#slide {
	max-width: 640px;
	margin: 0 auto;
	list-style-type: none;
}
#slide ul {
	position: relative;
	width: 100%;
	list-style-type: none;
}
#slide ul li {
	position: absolute;
	left: 0;
	top: 0;
}
</code></pre>
			<h2>言語設定：language-javascript</h2>
			<p class="label-javascript">JavaScript</p>
			<pre class="line-numbers"><code class="language-javascript">
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
         ' class=""';
  } catch (e) {
  /* handle exception */
  }
  for (var i = 0 / 2; i &lt; classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}
</code></pre>
		</details>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>

</body>
</html>

PAGE
TOP

WebParts-9 シンタックスハイライト

目次

P9.1 はじめに

P9.1.1 概要

P9.2 シンタックスハイライト

P9.2.1 highlight（基本形）

(1) 説明

(2) 表示形式

(3) 使用機能

(4) 実装手順

(5) サンプルコード

(a) ファイル配置

(b) ソースコード

P9.2.2 highlight（種別付）

(1) 説明

(2) 表示形式

(3) 使用機能

(4) 実装手順

(5) サンプルコード

(a) ファイル配置

(b) ソースコード

P9.2.3 highlight（折り込み）

(1) 説明

(2) 表示形式

(3) 使用機能

(4) 実装手順

(5) サンプルコード

(a) ファイル配置

(b) ソースコード

P9.2.4 Prism（基本形）

(1) 説明

(2) 表示形式

(3) 使用機能

(4) 実装手順

(5) サンプルコード

(a) ファイル配置

(b) ソースコード

P9.2.5 Prism（種別付）

(1) 説明

(2) 表示形式

(3) 使用機能

(4) 実装手順

(5) サンプルコード

(a) ファイル配置

(b) ソースコード

P9.2.6 Prism（折り込み）

(1) 説明

(2) 表示形式

(3) 使用機能

(4) 実装手順

(5) サンプルコード

(a) ファイル配置

(b) ソースコード

P9.2.7 Prism（色変更）

(1) 説明

(2) 表示形式

(3) 使用機能

(4) 実装手順

(5) サンプルコード

(a) ファイル配置

(b) ソースコード

WebParts-9
シンタックスハイライト