Skip to content

HikiFormat

Jump to bottom Edit New page
miyohide edited this page Jan 2, 2014 · 1 revision

はじめに

このページは、るびま記事の執筆に必要な Hiki フォーマットについて記しています。ここでは、るびまの記事で利用可能なプラグインも含めて、入力テキストと変更後 HTML を並べながら、Hiki フォーマットを説明します。

なお原稿は Hiki フォーマットが望ましいものの、厳密に従っている必要はありません。Hiki フォーマットでの書き方が間違ってても、担当編集者が修正してくれるはずです (担当編集者とご相談ください)。ただし、正しい Hiki フォーマットに修正してもらったあとに記事を訂正・変更する場合は、なるべく Hiki フォーマットのまま訂正・変更してくださるよう、ご協力をお願いします。

Hiki フォーマット詳細

コメント

「//」で始まる行はコメントであり、変換後の HTML では表示されません。

セクション

「!」で始まる行がセクションタイトルであり、<h2> タグになります。「!!」なら <h3> タグ、「!!!」なら <h4> タグになり、最大で「!!!!!」(<h6>) まで使えます。

// Before (Text)                // After (HTML)
! Section                       <h2>Section</h2>
!! Sub Section                  <h3>Sub Section</h3>
!!! Sub Sub Section             <h4>Sub Sub Section</h4>

なお <h1> タグはページタイトルに使われます。

段落、改行

空行を入れると新しい段落になります。 連続した空行は、1 つだけの空行と同じ扱いです。

空行ではない、ただの改行は、半角スペース扱いになります。 強制的に改行を入れたい場合は、「{{br}}」を使います。

// Before (Text)                // After (HTML)
Lorem ipsum dolor sit amet,     <p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit.   consectetur adipisicing elit.</p>

Sed do eiusmod tempor{{br}}     <p>Sed do eiusmod tempor<br>
incididunt ut labore et{{br}}   incididunt ut labore et<br>
dolore magna aliqua.            dolore magna aliqua.</p>

強調、取り消し線

「STRONG」と「EMPHASIS」と「DEL」が使えます。

// Before (Text)                // After (HTML)
'''STRONG'''                    <strong>STRONG</strong>
''EMPHASIS''                    <em>EMPHASIS</em>
==DEL==                         <del>DEL</del>

なお「'''」や「==」をエスケープする記法はありません。 回避策としては、「'''」や「==」をそれぞれ 1 行に 1 つだけ記述します。

// Before (Text)                // After (HTML)
x == 0 and y == 0               x <del> 0 and y </del> 0

x == 0                          x == 0
and y == 0                      and y == 0

リンク

リンクは「[ [名前|http://example.com/] ]」のように書きます。

// Before (Text)
[ [RubyistMagazine|http://jp.rubyist.net/magazine/] ]

// After (HTML)
<a href="http://jp.rubyist.net/magazine/">RubyistMagazine</a>

リンクの URL が画像 (*.png や *.jpg や *.gif) だと、<a>ではなく<img>タグになります。リンクを <img>タグにしたくない場合は、回避策として URL の末尾に「?」をつけてください。

// Before (Text)
[ [Ruby Logo|http://www.ruby-assn.org/ruby-logo2.png] ]
[ [Ruby Logo|http://www.ruby-assn.org/ruby-logo2.png?] ]

// After (HTML)
<img src="http://www.ruby-assn.org/ruby-logo2.png" title="Ruby Logo">
<a href="http://www.ruby-assn.org/ruby-logo2.png?">Ruby Logo</a>

他の記事へのリンクは、「[ [ページ名] ]」のようにします (記事 URL における「?」以降の文字列がページ名です)。

// Before (Text)
[ [0033-TranslationArticle] ]

// After (HTML)
<a href="./?0033-TranslationArticle">海外記事翻訳シリーズ 【第 2 回】 Rack 仕様</a>

記事内のセクションへのリンクを張る方法は提供されてませんが、回避策としては、生成された HTML のソースから該当するアンカータグ (例：<a name="l99">) を探し、「[ [セクションタイトル|http://jp.rubyist.net/magazine/?ページ名#l99] ]」とすれば可能です。

箇条書き

「」や「#」で始まる行は、それぞれ <ul><li>と<ol><li>になります。また「」や「#」を重ねると、入れ子にできます。

// Before (Text)                // After (HTML)
* Unordered list                <ul>
** Unordered list                 <li>Unordered list
*** Unordered list                  <ul>
                                      <li>Unordered list
                                        <ul>
                                          <li>Unordered list</li>
                                        </ul>
                                      </li>
                                    </ul>
                                  </li>
                                </ul>

# Ordered list                  <ol>
## Ordered list                   <li>Ordered list
### Ordered list                    <ol>
                                      <li>Ordered list
                                        <ol>
                                          <li>Ordered list</li>
                                        </ol>
                                      </li>
                                    </ol>
                                  </li>
                                </ol>

箇条書きの項目は 1 行で書くようにしてください。複数行にしようとして途中で改行を入れると、<pre>タグになってしまいます。項目の途中で改行を入れたい場合は「{{br}}」を使ってください。

// Before (Text)                // After (HTML)
* Haruhi                        <ul>
  Mikuru                          <li>Haruhi</li>
  Yuki                          </ul>
                                <pre>
                                Mikuru
                                Yuki
                                </pre>

* Haruhi{{br}}Mikuru{{br}}Yuki  <ul>
                                  <li>Haruhi<br>Mikuru<br>Yuki</li>
                                </ul>

定義リスト

「:」や「::」で始まる行は、<dl><dd><dt>タグになります。1 行にまとめて書く方法と、2 行に分けて書く方法があります。

// Before (Text)                // After (HTML)
:Yuki:Humanoid Interface        <dl>
:Mikuru:Time Traveler             <dt>Yuki</dt>
:Ituski:ESPer Boy                 <dd>Humanoid Interface</dd>
                                  <dt>Mikuru</dt>
                                  <dd>Time Traveler</dd>
                                  <dt>Ituski</dt>
                                  <dd>ESPer Boy</dd>
                                </dl>

: Yuki                          <dl>
:: Humanoid Interface             <dt> Yuki</dt>
: Mikuru                          <dd> Humanoid Interface</dd>
:: Time Traveler                  <dt> Mikuru</dt>
: Ituski                          <dd> Time Traveler</dd>
:: ESPer Boy                      <dt> Ituski</dt>
                                  <dd> ESPer Boy</dd>
                                </dl>

なお複数行のテキストを含めたい場合は、箇条書きのときと同じように、「{{br}}」を使ってください。

整形済みテキスト

プログラムコードなどを<pre>タグで表示したい場合は、行頭を半角空白またはタブでインデントしてください。 なおインデント幅が N だとすると、各行の先頭に N-1 個の半角空白が入ります。

// Before (Text)                // After (HTML)
List 1. fibonacchi              <p>List 1. fibonacchi</p>

    def fib(n)                  <pre>   def fib(n)
      return 1 if n <= 2             return 1 if n <= 2
      fib(n-1) + fib(n-2)            fib(n-1) + fib(n-2)
    end                            end
                                </pre>

または「<<<」と「>>>」で囲ってください。 この場合であれば、インデントは必要ありません。

// Before (Text)                // After (HTML)
List 1. fibonacchi              <p>List 1. fibonacchi</p>
<<<                             <pre>def fib(n)
def fib(n)                        return 1 if n <= 2
  return 1 if n <= 2              fib(n-1) + fib(n-2)
  fib(n-1) + fib(n-2)           end
end                             </pre>
>>>

画像

外部サイトにある画像を表示する場合は、リンクと同じように「[ [テキスト|http://...] ]」とします。リンクの URL が画像 (*.png や *.jpg や *.gif) であれば、<a>ではなく <img>タグで表示されます。

// Before (Text)
[ [Ruby Logo|http://www.ruby-assn.org/ruby-logo2.png] ]

// After (HTML)
<img src="http://www.ruby-assn.org/ruby-logo2.png" title="Ruby Logo">

記事に添付した画像を表示する場合は、「{{attach_view('image.png')}}」のようにします。

// Before (Text)
Fig 1. Ruby Logo
{{attach_view('logo2.png')}}

// After (HTML)
Fig 1. Ruby Logo
<img alt="logo2.png" src="./?c=plugin;plugin=attach_download;p=XXX;file_name=logo2.png">

後続するテキストが画像横に回り込むのを避けたい場合は、回避策としてセクションの終わりに画像を配置してください。

脚注

脚注は「{{fn('....')}}」のように書きます。このとき、必ず 1 行で書いてください。複数行に分けると、認識されません。

// Before (Text)
SOS Brigade{{fn('Sekai wo Ooini moriageru tame no Suzumiya haruhi no dan')}}

----

// After (HTML)
SOS Brigade<span class="footnote">
  <a title="Sekai wo Ooini moriageru tame no Suzumiya haruhi no dan"
     name="fm01" href="#f01">*1</a>
</span>

<hr>
<div class="footnote">
  <p class="footnote"><a name="f01" href="#fm01">*1</a>
    Sekai wo Ooini moriageru tame no Suzumiya haruhi no dan
  </p>
</div>

引用

「""」(ダブルクォーテーションが 2 つ) で始まる行は、引用になります。

// Before (Text)                // After (HTML)
""If any of you are aliens,     <blockquote>
""time-travelers or espers,     <p>If any of you are aliens,
""please come see me.           time-travelers or espers,
                                please come see me.</p>
                                </blockquote>

テーブル

「||」で始まる行はテーブルになります。「||!」は見出し (<th>)です。

// Before (Text)
||!Member    ||!Role
||Mikuru     ||Time Traveler
||Yuki       ||Humaoid Interface
||Ituski     ||ESPer Body

// After (HTML)
<table>
  <tr><th>Member    </th><th>Role</th></tr>
  <tr><td>Mikuru     </td><td>Time Traveler</td></tr>
  <tr><td>Yuki       </td><td>Humaoid Interface</td></tr>
  <tr><td>Ituski     </td><td>ESPer Body</td></tr>
</table>

また「||^」は上セルへの連結 (rowspan)、「||>」は右セルへの連結 (colspan) になります。このとき、「^」や「>」は連結したい数だけ重ねることができます。

// Before (Text)
||^^>>         || H ||^^>
||                A ||
||                R ||
|| M || I || K || U || R || U
||>>           || H ||^>
|| Y || U || K || I ||

HTML エンティティ

「©」(&copy;) や「®」(&reg;) や「♥」(&hearts;) は、それぞれ「{{e('copy')}}」や「{{e('reg')}}」や「{{e('hearts')}}」のように入力します。

// Before (Text)                // After (HTML)
{{e('copy')}}                   &copy;
{{e('reg')}}                    &reg;
{{e('hearts')}}                 &hearts;
{{e(169)}}                      &169;
{{e(174)}}                      &174;

その他

  • 「----」は<hr>タグになります。記事中に脚注を使っている場合、記事本文と脚注との区切りのため、記事末尾に必ず「----」を入れてください。

  • 目次は「{{toc}}」です。記事冒頭に入れてください。

  • 連載記事の場合、初回から以下のような「バックナンバー」のセクションを入れてください。

    ! バックナンバー

    {{backnumber('SOS')}} // URL が ?0001-SOS の場合

  • 次のことはできないようです。

    • 生 HTML の入力
    • <tt>や <code>
    • 動画の埋め込み (YouTube など)
Add a custom footer
Add a custom sidebar
Clone this wiki locally