執筆者向けブログ編集方法リファレンス

新シンタックスハイライト

新シンタックスハイライト

シンタックスハイライトは基本的な使用方法はとても簡単です。

[言語タイプ]ソースコード[/言語タイプ]

利用可能な言語

  • go
  • as3
  • bash
  • c
  • cpp
  • csharp
  • coldfusion
  • diff
  • erlang
  • groovy
  • java
  • javafx
  • javascript ※ js, json も可能
  • delphi
  • pascal
  • perl
  • php
  • powershell
  • python
  • ruby
  • shell
  • text
  • vb
  • vbnet
  • scala
  • sql
  • css
  • xml
  • html
  • xhtml
  • xslt
  • oc(Objective-C)
  • coffee(CoffeeScript)
  • swift
  • kotlin ※ kt も可能
  • yaml ※ yml も可能
  • typescript(TypeScript) ※ tscript, ts も可能

記述サンプル

HTMLのソースコードを表示

[html]
ソースコード
[/html]

CSSのソースコードを表示

[css]
ソースコード
[/css]

JavaScriptのソースコードを表示

[javascript]
ソースコード
[/javascript]

JSONのソースコードを表示

[json]
ソースコード
[/json]

YAMLのソースコードを表示

[yaml]
ソースコード
[/yaml]

XML, MXML, XAMLのソースコードを表示

[xml]
ソースコード
[/xml]

その他、言語依存しないテキストを表示

[text]
hogehoge
fugafuga
[/text]

(非推奨)Markdownで使う

2018.3.20更新 この形式でのソースコード記述は非推奨です。ソースコードの内容や他のタグとの兼ね合いでエスケープ処理がうまく動かず、タグがhtml展開できない事象が頻発しています。コード記述については、信頼性が高いシンタックスハイライターネイティブな[言語タイプ]ソースコード[/言語タイプ]記法をご利用ください m(_ _)m

Markdownのコードブロックで言語を指定して使うこともできます。

言語名の前に必ずスペースを入れてください。スペースが入っていないと正しく表示されないなどの原因となります。

記述例

``` html
<p>text</p>
```

``` javascript
var hoge = "fuga";
```

表示例

<p>text</p>
var hoge = "fuga";

オプション

行番号の開始番号を指定する

[言語タイプ firstline="5"]ソースコード[/言語タイプ](旧:num="")

<div id="id">
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ol>
		<li></li>
		<li></li>
		<li></li>
	</ol>
</div>

指定行のハイライト

[言語タイプ highlight="1-3,6,9"]ソースコード[/言語タイプ](旧:highlight_lines="")

複数行指定する場合は,カンマ区切り。範囲指定を行う場合は-を使います。

<div id="id">
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ol>
		<li></li>
		<li></li>
		<li></li>
	</ol>
</div>

行番号を非表示にする

[言語タイプ gutter="false"]ソースコード[/言語タイプ](旧と同じ)

<div id="id">
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ol>
		<li></li>
		<li></li>
		<li></li>
	</ol>
</div>

ファイル名を表示する

[言語タイプ title="index.html"]ソースコード[/言語タイプ](旧:file_name="")

<div id="id">
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ol>
		<li></li>
		<li></li>
		<li></li>
	</ol>
</div>