-
Notifications
You must be signed in to change notification settings - Fork 0
/
getting-started.html
292 lines (290 loc) · 21.8 KB
/
getting-started.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Getting Started | highlight.js - にほんご。</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta property="og:title" content="Getting Started | highlight.js - にほんご。">
<meta property="og:url">
<meta property="og:type" content="article">
<link rel="icon" href="https://tr.you84815.space/hljs/favicon.ico">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<link id="theme_style" rel="stylesheet" type="text/css" href="">
<script id="srcTheme" src="./js/toggleTheme.js" data-dir="hljs"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-106478577-1', 'auto');
</script>
</head>
<body>
<div id="container">
<header>
<div class="icon"><a class="no-barba" href="https://tr.you84815.space/">
<svg width="16" height="16">
<rect width="16" height="16" fill="#e0e0e0"></rect>
</svg></a></div>
<div class="navi_toggle" onclick="toggleMenu()">
<svg id="menu_close" width="24" height="24" viewBox="0 0 24 24">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
<path d="M0 0h24v24H0z" fill="none"></path>
</svg>
<svg id="menu_open" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
</svg>
</div>
<div class="title">highlight.js - <a class="no-barba" href="https://tr.you84815.space/">にほんご。</a></div><span id="toggleTheme">
<svg role="img" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z"></path>
</svg></span>
</header>
<div class="navi" id="navi">
<ul class="menu">
<li><a class="index" href="./index.html">Home</a></li>
<li><a class="getting-started active" href="./getting-started.html">Getting Started</a></li>
<li><span onclick="toggleApi()">Library API</span>
<ul class="hidden" id="navi_api">
<li><a href="./api/highlight.html">.highlight()</a></li>
<li><a href="./api/highlight-auto.html">.highlightAuto()</a></li>
<li><a href="./api/fix-markup.html">.fixMarkup()</a></li>
<li><a href="./api/highlight-block.html">.highlightBlock()</a></li>
<li><a href="./api/configure.html">.configure()</a></li>
<li><a href="./api/init-highlighting.html">.initHighlighting()</a></li>
<li><a href="./api/init-highlighting-onload.html">.initHighlightingOnLoad()</a></li>
<li><a href="./api/register-language.html">.registerLanguage()</a></li>
<li><a href="./api/list-languages.html">.listLanguages()</a></li>
<li><a href="./api/get-language.html">.getLanguage()</a></li>
</ul>
</li>
<li><a class="languageGuide" href="./language-guide.html">Language definition guide</a>
<ul class="hidden" id="navi_languageGuide">
<li><a href="./language-guide.html#highlighting-overview">ハイライトの概要</a></li>
<li><a href="./language-guide.html#general-syntax">一般的な構文</a></li>
<li><a href="./language-guide.html#keywords">キーワード</a></li>
<li><a href="./language-guide.html#sub-modes">サブモード</a></li>
<li><a href="./language-guide.html#comments">コメント</a></li>
<li><a href="./language-guide.html#markup-generation">マークアップ</a></li>
<li><a href="./language-guide.html#mode-attributes">モード属性</a></li>
<li><a href="./language-guide.html#relevance">コードの関連性</a></li>
<li><a href="./language-guide.html#illegal-symbols">不正シンボル</a></li>
<li><a href="./language-guide.html#pre-defined-modes">定義済みのモードと正規表現</a></li>
</ul>
</li>
<li><a class="reference" href="./reference.html">Mode reference</a>
<ul class="hidden" id="navi_reference">
<li><a href="./reference.html#types">各属性値の型</a>
</li>
<li><a href="./reference.html#attributes">属性</a>
<ul>
<li><a href="./reference.html#case_insensitive">case_insensitive</a></li>
<li><a href="./reference.html#aliases">aliases</a></li>
<li><a href="./reference.html#className">className</a></li>
<li><a href="./reference.html#begin">begin</a></li>
<li><a href="./reference.html#end">end</a></li>
<li><a href="./reference.html#beginKeywords">beginKeywords</a></li>
<li><a href="./reference.html#endsWithParent">endsWithParent</a></li>
<li><a href="./reference.html#endsParent">endsParent</a></li>
<li><a href="./reference.html#lexemes">lexemes</a></li>
<li><a href="./reference.html#keywords">keywords</a></li>
<li><a href="./reference.html#illegal">illegal</a></li>
<li><a href="./reference.html#exclude">excludeBegin, excludeEnd</a></li>
<li><a href="./reference.html#returnBegin">returnBegin</a></li>
<li><a href="./reference.html#returnEnd">returnEnd</a></li>
<li><a href="./reference.html#contains">contains</a></li>
<li><a href="./reference.html#starts">starts</a></li>
<li><a href="./reference.html#variants">variants</a></li>
<li><a href="./reference.html#subLanguage">subLanguage</a></li>
<li><a href="./reference.html#skip">skip</a></li>
</ul>
</li>
</ul>
</li>
<li><span onclick="cssClassRef()">CSS classes reference</span>
<ul class="hidden" id="navi_cssClassRef">
<li><a href="./css-class-ref/stylable-class.html">指定可能なクラス</a></li>
<li><a href="./css-class-ref/language-name.html">言語名とエイリアス</a></li>
</ul>
</li>
<li><a class="styleGuide" href="./style-guide.html">Style guide</a>
<ul class="hidden" id="navi_styleGuide">
<li><a href="./style-guide.html#key-principle">基本的な方針</a></li>
<li><a href="./style-guide.html#defining-a-theme">テーマの定義</a></li>
<li><a href="./style-guide.html#typography-n-layout">タイポグラフィとレイアウトの注意事項</a></li>
<li><a href="./style-guide.html#subst">.subst</a></li>
<li><a href="./style-guide.html#contributing">コントリビュート</a></li>
</ul>
</li>
<li><a class="languageCheckList" href="./language-check-list.html">Language contributor checklist</a>
<ul class="hidden" id="navi_languageCheckList">
<li><a href="./language-check-list.html#put-language-definition">1. 言語定義の.jsファイルを追加</a></li>
<li><a href="./language-check-list.html#provide-meta-data">2. メタデータの挿入</a></li>
<li><a href="./language-check-list.html#code-example">3. コード例の作成</a></li>
<li><a href="./language-check-list.html#write-class-reference">4. クラスリファレンス作成</a></li>
<li><a href="./language-check-list.html#add-yourself">5. AUTHORS.*.txtとCHANGES.mdの編集</a></li>
<li><a href="./language-check-list.html#pull-request">6. プルリクエストを作成</a></li>
</ul>
</li>
<li><a class="buildAndTest" href="./building-n-testing.html">Building and testing</a>
<ul class="hidden" id="navi_buildAndTest">
<li><a href="./building-n-testing.html#building">ビルド</a></li>
<li><a href="./building-n-testing.html#basic-testing">基本テスト</a></li>
<li><a href="./building-n-testing.html#testing-markup">マークアップテスト</a></li>
</ul>
</li>
<li><a class="releaseProcess" href="./release-process.html">Release process</a></li>
<li><a class="lineNumbers" href="./line-numbers.html">Line numbers</a></li>
<li><a class="newLanguages" href="./new-languages.html">On requesting new languages</a></li>
<li><a class="other" href="./other.html">Other</a></li>
</ul>
</div>
<div id="content">
<div id="main">
<div id="barba-wrapper">
<div class="barba-container">
<h1>Getting Started</h1>
<div id="update_date"><span>更新日: 2018.09.13
</span>
</div>
<p>
highlight.jsを使う最も簡単な方法は、
ライブラリと、スタイルを読み込み、<a class="no-barba" href="./api/init-highlighting-onload.html"><code>.initHighlightingOnLoad()</code></a>メソッドを呼び出します。
</p>
<pre><code><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/path/to/styles/default.css"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/path/to/highlight.pack.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span>hljs.initHighlightingOnLoad();<span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre><br>
<p>highlight.jsは<code><pre><code></code>タグを探し出し、
その中のコードをハイライトします。
該当言語は、自動で検出するよう試みますが、
自動検出がうまく動かない場合は、<code>class</code>属性で設定することができます。
</p>
<pre><code><span class="hljs-tag"><<span class="hljs-name">pre</span>></span><span class="hljs-tag"><<span class="hljs-name">code</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"html"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">code</span>></span><span class="hljs-tag"></<span class="hljs-name">pre</span>></span></code></pre><br>
<p>サポートされている言語は、<a href="./css-class-ref/language-name.html">クラスリファレンス</a>で確認することができます。
クラスには<code>language-</code>または、<code>lang-</code>というプレフィックスを付けることができます。
</p>
<p>ハイライトを無効にするには、<code>nohighlight</code>クラスを使用します。</p>
<pre><code><span class="hljs-tag"><<span class="hljs-name">pre</span>></span><span class="hljs-tag"><<span class="hljs-name">code</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nohighlight"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">code</span>></span><span class="hljs-tag"></<span class="hljs-name">pre</span>></span></code></pre><br>
<h2>カスタム初期化</h2>
<p>もしhighlight.jsの初期化を制御したい場合、<a class="no-barba" href="./api/configure.html"><code>.configure()</code></a>メソッドと、<a class="no-barba" href="./api/highlight-block.html"><code>.highlightBlock()</code></a>メソッドを使います。
これにより、いつ、どの項目をハイライトするかを制御することができます。
</p>
<p>ここでは、jQueryを使って、<a class="no-barba" href="./api/init-highlighting-onload.html"><code>.initHighlightingOnLoad()</code></a>メソッドと同等の呼び出す方法を示します。</p>
<pre><code>$(<span class="hljs-built_in">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
$(<span class="hljs-string">'pre code'</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">i, block</span>) </span>{
hljs.highlightBlock(block);
});
});</code></pre><br>
<p><code><pre><code></code>の代わりに、
任意のタグを使うこともできます。
もし改行を表示しないタグ(<code>pre</code>タグ以外)を使用する場合には、
<code><br></code>タグを使うよう設定する必要があります。
</p>
<pre><code>hljs.configure({<span class="hljs-attr">useBR</span>: <span class="hljs-literal">true</span>});
$(<span class="hljs-string">'div.code'</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">i, block</span>) </span>{
hljs.highlightBlock(block);
});</code></pre>
<p>その他のオプションについては、<a class="no-barba" href="./api/configure.html"><code>.configure()</code></a>を参照して下さい。</p><br>
<h3>デモ</h3>
<p><code>pre > code</code>タグではなく、
<code>span</code>タグを使ってソースのハイライトを表示しています。
</p><span class="code">hljs.configure({<br> useBR: true, // 改行にbrタグを使用<br> tabReplace: ' ', // タブを全角スペース2つに変更<br>});<br>var code = document.querySelectorAll('span.code');<br>for (var i = 0; i < code.length; i++) {<br> hljs.highlightBlock(code[i]);<br>}</span>
<h5>JavaScript</h5>
<pre><code>hljs.configure({
<span class="hljs-attr">useBR</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 改行にbrタグを使用</span>
<span class="hljs-attr">tabReplace</span>: <span class="hljs-string">' '</span>, <span class="hljs-comment">// タブを' '全角スペース2つに変更</span>
});
<span class="hljs-keyword">var</span> code = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">'span.code'</span>);
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < code.length; i++) {
hljs.highlightBlock(code[i]);
}</code></pre>
<h5>HTML</h5>
<pre><code><span class="xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"code"</span>></span>
hljs.configure({<span class="hljs-tag"><<span class="hljs-name">br</span>></span>
useBR: true, // 改行にbrタグを使用<span class="hljs-tag"><<span class="hljs-name">br</span>></span>
tabReplace: ' ', // タブを全角スペース2つに変更<span class="hljs-tag"><<span class="hljs-name">br</span>></span>
});<span class="hljs-tag"><<span class="hljs-name">br</span>></span>
var code = document.querySelectorAll('span.code');<span class="hljs-tag"><<span class="hljs-name">br</span>></span>
for (var i = 0; i <span class="hljs-tag">< <span class="hljs-attr">code.length</span>; <span class="hljs-attr">i</span>++) {<<span class="hljs-attr">br</span>></span>
hljs.highlightBlock(code[i]);<span class="hljs-tag"><<span class="hljs-name">br</span>></span>
}
<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
</span></code></pre>
<h2>WebWorker</h2>
<p>
WebWorkerを使うことで、とても大きなソースコードであっても
ブラウザをフリーズさせることなく、ソースコードをハイライトすることができます。
</p>
<h4>メイン処理</h4>
<pre><code>addEventListener(<span class="hljs-string">'load'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">var</span> code = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'#code'</span>);
<span class="hljs-keyword">var</span> worker = <span class="hljs-keyword">new</span> Worker(<span class="hljs-string">'worker.js'</span>);
worker.onmessage = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>{ code.innerHTML = event.data; }
worker.postMessage(code.textContent);
})</code></pre>
<h4>worker.js</h4>
<pre><code>onmessage = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>{
importScripts(<span class="hljs-string">'<path>/highlight.pack.js'</span>);
<span class="hljs-keyword">var</span> result = self.hljs.highlightAuto(event.data);
postMessage(result.value);
}
</code></pre>
<h2>highlight.jsの取得について</h2>
<p>
highlight.jsは、ホスティング、カスタムビルド、ブラウザスクリプト、サーバモジュールが用意されています。
AMD、CommonJSからすぐに利用することができるので、ソースをビルドする必要はなく、
そのままRequireJSや、Browserifyを使うことができます。
サーバモジュールでもBrowserifyで完璧に動作しますが、
サーバ用ではない、ブラウザ用のビルドを使用するオプションがあります。
全てのオプションは<a href="https://highlightjs.org/download/" target="_blank" rel="noopener noreferrer">ダウンロードページ</a>にあります。
</p><br>
<p><b>GitHubページにはリンクしないでください。</b>
highlight.jsのソースはそのままでは動かないので、ビルドしなければなりません。
もし、パッケージ化されたオプションで想定どおり動作しない場合、<a href="./building-n-testing.html">ビルドについて</a>を参照してください。
</p><br>
<p><b>CDNホストのパッケージには全ての言語が含まれているわけではありません。</b>
全ての言語を網羅すると、ライブラリのサイズが大きくなりすぎてしまいます。
必要な言語が<a href="https://highlightjs.org/download/" target="_blank" rel="noopener noreferrer">Common</a>に無い場合は、手動で追加することができます。
</p>
<pre><code><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre><br>
<p><b>Almond.jsの場合。</b>
モジュールに名前を付けるために、オプティマイザを使ってください。
例えば以下のように指定します。
</p>
<pre><code><span class="hljs-meta">$</span><span class="bash"> r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js</span></code></pre><br>
<script class="load">
createObj = function() {
var hljsDemo = hljs;
hljsDemo.configure({
useBR: true, // 改行にbrタグを使用
tabReplace: ' ', // タブを' '全角スペース2つに変更
});
var code = document.querySelectorAll('span.code');
for (var i = 0; i < code.length; i++) {
hljsDemo.highlightBlock(code[i]);
}
};
</script><br>
<div class="license">
<p>
© 2006
Highlight.js is released under the BSD License. See <a href="https://github.com/isagalaev/highlight.js/blob/master/LICENSE">LICENSE</a> file for details.
</p>
<p>このコンテンツは<a href="https://highlightjs.readthedocs.io/en/latest/">highlightjsドキュメント</a>を翻訳/改変したものです。</p>
</div>
</div>
</div>
</div>
</div>
<footer><span>© <span id="copy_year">2017</span> tobijibu</span></footer>
</div>
<noscript id="deferred-styles">
<link href="./css/lazy.css" rel="stylesheet">
</noscript>
<script src="./js/main.js" defer></script>
<script src="./js/highlight.pack.js"></script>
<div id="src" hidden></div>
</body>
</html>