ブロック記法

ブロック要素に展開される記法です。

ブロック記法一覧

書式展開されるタグ< >[ ]行処理備考
>>~<<blockquote 
>>|~|<<blockquote× 
>>||~||<<blockquote××× 
>>del~<<del 
>>ins~<<ins 
>|~|<pre× 
>||~||<pre××× 
>||#~#||<pre×××#{~}や##{~}で強調コメント。((~))で注釈が書ける
>>>~<<<div 
>>>|~|<<<div× 
>>>[~]<<<div××HTMLタグは有効
>>><~><<<div××記法タグは有効
>>>||~||<<<div××× 
>|aa|~||<div××アスキーアート記法。class="ascii-art"
>|?|~||<pre××シンタックスハイライト記法。
class="syntax-highlight syntax-lang"
>|lang|~||<
```~```シンタックスハイライト。Ver3.21以降
>>http://~<<blockquote××引用元を示す引用記法。
>http://>~<<blockquote××(非推奨)引用元を示す引用記法。はてな互換。
>||comment~||<<!-- -->×××コメントブロック記法。通常の<!-- -->コメントはHTML出力しない*1
>||script~||<script×××スクリプト記法trust_mode以外では出力されない
>||script-defer~||<script×××Ver3.32以降。スクリプト記法。jQuery等が有効。
>>|figure~<<figure×Ver3.10以降
>>figure~<<figureVer3.10以降
```math~```div×××MathJaxブロック。Ver3.21以降

法則

  • > は pre
  • >> は blockquote
  • >>> は div
  • | は行処理なし
  • || は行処理とタグなし

*1 : はてな記法由来の仕様

引用記法とpre記法の例

>>
この部分は引用です。
<<
>||
この部分<strong>などのタグや、さつき記法のタグ[key:123]がそのまま出力されます。
||<

この部分は引用です。

この部分<strong>などのタグや、さつき記法のタグ[key:123]がそのまま出力されます。

ルール

  • ブロックは矛盾のない範囲で入れ子にすることができます。
  • 記法タグが無効な環境では、新たなブロック開始タグは無効になります。
  • 文字を含むブロック記法では一応大文字も使えますが、小文字表記を推奨します。

【例】埋め込みコードを書きたいとき

例えばtwitterの埋め込みコードの場合は次のようにします。

>>>|
<blockquote class="twitter-tweet" lang="ja"><p>adiary Ver3 β2 公開しました。<a href="http://t.co/Wh4jSYix7h">http://t.co/Wh4jSYix7h</a></p>
&mdash; nabe (@nabe_abk) <a href="https://twitter.com/nabe_abk/statuses/502450205652824066">2014, 8月 21</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|<<<

こうすることで、ブロック中では段落処理が行われなくなりますので、余計なスペースなどが出ることがなくなります。*2*3

*2 : <script>タグがあるためtrust_mode以外では実行できません。

*3 : サンプルとして出しましたが、ツイート表示ならばフィルター記法を使用するほうが圧倒的に便利です。

【例】引用記法の引用元表示

>>https://adiary.org/:adiary公式ページより
adiary は導入が簡単で、Wiki のようにも活用でき、CMS的コンテンツとblogを一元的に管理することができます。
<<

adiary は導入が簡単で、Wiki のようにも活用でき、CMS的コンテンツとblogを一元的に管理することができます。

adiary公式ページより

※Ver3.20以前は [https://adiary.org/:adiary公式ページより] のように [ ] 付きで記述してください。

【例】シンタックハイライト / Markdown形式


```pl:test.pl
use strict;
print sqrt(30*30+40*40),"\n";
```

```
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
```
use strict;
print sqrt(30*30+40*40),"\n";
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

【例】シンタックハイライト

>|perl|
#!/usr/bin/perl
use 5.8.1;
use strict;
use Satsuki::Base ();
#-------------------------------------------------------------------------------
# Satsuki system - Startup routine (for CGI)
#-------------------------------------------------------------------------------
{
	my $ROBJ = Satsuki::Base->new();	# ルートオブジェクト生成
	$ROBJ->{Timer} = $timer;		# タイマーの保存
	$ROBJ->start_up();
	$ROBJ->finish();
}
||<
#!/usr/bin/perl
use 5.8.1;
use strict;
use Satsuki::Base ();
#-------------------------------------------------------------------------------
# Satsuki system - Startup routine (for CGI)
#-------------------------------------------------------------------------------
{
	my $ROBJ = Satsuki::Base->new();	# ルートオブジェクト生成
	$ROBJ->{Timer} = $timer;		# タイマーの保存
	$ROBJ->start_up();
	$ROBJ->finish();
}

言語名を「>|perl|」のように書かなくても、「>|?|」だけでほとんどうまく行きます。

対応言語はjs/highlight.txtを確認してください。*4

*4 : プラグインを用意すれば別のシンタックスハライトツールを使用することもできます。仕組みはadiary.jsの「alt_SyntaxHighlight」を参照してください。

【例】HTMLのコメントを書きたい時

あいうえお
>||comment
この部分はHTMLコメント「<!-- -->」として出力されます。
||<
かきくけこ

あいうえお

かきくけこ

コメント中の「--」はすべて「==」に置換されます。*5

*5 : HTMLコメントの仕様が複雑でブラウザにより対応がまちまちのため、こうしておかないとコメント終了位置をブラウザが間違えることがあります。

【例】JavaScriptやコメントを書きたい時

>||script
alert("Execute!");
||<

この記法はtrust_modeでのみ有効です。jQueryを使って書くこともできます。*6

全体が<script>タグで囲まれる以外は、上のコメントブロック記法と一緒です。

「script-defer」記法では、jQuery等のライブラリロード後に実行されます。

*6 : 標準でロードされています。

【例】PCやスマホのみで出力したい(Ver3.02以降)

>>>for-pc
PCでのみ表示
<<<
>>>for-sp
スマホでのみ表示
<<<

div以外のブロックにも同様に指定できます。

figureブロック(Ver3.10以降)

画像の貼り付けなどに使われるfigureブロックです。キャプションを付けることが可能です。画像以外のあらゆるブロック要素に対してもキャプションを付けるために利用できます。

>>figure caption=ブロック一覧表
>>
-insブロック
-delブロック
-divブロック
-figureブロック
<<
<<

>>|figure center
[image:S::Aboo.png:Aboo.png]
|<<
  • insブロック
  • delブロック
  • divブロック
  • figureブロック
ブロック一覧表
Aboo.png