めもめも。
wiki記法みたいな書き方で色々できるアレです。導入してみたので、記法をまとめてみました。
導入したのはこれ。
“markdown”でプラグイン検索するとたくさんヒットするんですが、公開前に手動で変換ボタンを押さなくちゃいけなかったりするものもありました。これはそんな事はなくて、書いておけば勝手に変換して表示してくれます。パフォーマンスはその分悪いのかな……？
これを選んだ理由はそれくらいで、またその利点も他のプラグインが備えている事もあるかと思いますが、とりあえず使ってみます。他にもっと便利そうなのあれば教えてください。
あと後述してますが、SyntaxHighlighterと競合してぐちゃぐちゃになりました。これはSyntaxHighlighterの部分を<div> ... </div>で括り、Markdown記法を適用させないようにして、解決しました。
基本
テキスト
普通に書けば普通にテキストとして表示されます。
Markdown記法に該当するものでなければ、何を書いても大丈夫です。
インラインHTML
HTMLを普通に書く事も可能です。
<kbd>Enter</kbd>を押して下さい。
<table>
<tr>
<td>表表表</td>
</tr>
</table>
また、実体参照も利用可能です。
©Takanashi
一方で「タグっぽくない」<と>、&は自動で判断してエスケープしてくれます。例えばこう書くと
AT&T 1 < 2
こう出力されます。
AT&T 1 < 2
ブロック要素
段落と改行
普通に書くと段落になります。
改行はただ改行しても無視されます。改行<br />としたい場合は、行末にスペースを2つ置いてから改行します。
見出し
# h1 ## h2 ### h3
引用
> 吾輩は猫である。名前はまだ無い。 > > どこで生れたかとんと見当がつかぬ。 > 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 > 吾輩はここで始めて人間というものを見た。 > しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。 > この書生というのは時々我々を捕えて煮て食うという話である。
さらにMarkdown記法を含める事も可能です。
リスト
*, +, -のいずれか。
* いろはに * ほへとち * りぬるを
順序ありリスト
数字なら何でも。全部0でもいい。
1. コーヒーを淹れます 2. 服を脱ぎます 3. たたみます
コードブロック
行を空白で開始すると、<pre><code> ... </code></pre>で括ってくれます。空白は半角スペース4つ以上か、タブ1つ以上です。
まあ僕はSyntaxHighlighter Evolvedを入れてるんで、この記法は使わないんですけどね。
SyntaxHilighterとの競合回避
で、SyntaxHilighterとMarkdownが競合して変な風になっちゃうんですが、回避方法がありまして。
SyntaxHilighter記法の前後を<div> ... </div>で括ると、Markdownは素通りしてくれるようになります。
<div>[html] <p>hehe</p> <p>hehe</p> [/html]</div>
<p>hehe</p> <p>hehe</p>
もっと賢く回避する方法あれば教えてくだせい。
水平線
---
インライン要素
リンク
[テキスト](url "タイトル")
こんなリンクに。
<a href="url" title="タイトル">テキスト</a>
もちろんタイトルは省略可能。
URLを別定義するリンク
“Reference-style links”だそうです。文中にはテキストとIDだけ書いておいて、そのIDのリンク先を別途定義できます。
これが
[人民][a]の[人民][a]による[人民][a]のための[政治][b] [a]: http://ja.wikipedia.org/wiki/%E4%BA%BA%E6%B0%91 [b]: http://www.kantei.go.jp/ "首相官邸"
こうなる。
<a href="http://ja.wikipedia.org/wiki/%E4%BA%BA%E6%B0%91">人民</a>の<a href="http://ja.wikipedia.org/wiki/%E4%BA%BA%E6%B0%91">人民</a>による<a href="http://ja.wikipedia.org/wiki/%E4%BA%BA%E6%B0%91">人民</a>のための<a href="http://www.kantei.go.jp/" title="首相官邸">政治</a>
あとテキストをID代わりにする事ができるそうで、その方が便利かな。サンプルそのまんま転載します。
I get 10 times more traffic from [Google][] than from [Yahoo][] or [MSN][]. [google]: http://google.com/ "Google" [yahoo]: http://search.yahoo.com/ "Yahoo Search" [msn]: http://search.msn.com/ "MSN Search"
強調
アスタリスク*かアンダースコア_で。
*ひとつだとem* **ふたつだとstrong**
コード
逆クォーテーションで括ると`<code />`に。
この記法はタグで括るだけじゃなくて、エスケープもしてくれます。便利！
逆クォーテーション`はShift+@で打てます。内容に`を含めたい場合は2つで括ります。
画像
リンクに似てますな。
なおwidth、height属性は付きません。
URLを別定義する画像
これもリンクと同じように、![alt][id]で定義しておいて別途[id]: urlを定義できます。
URLリンク
URLを< ... >で括ると、そのままリンクになります。
<https://ginpen.com>
メールアドレスも指定できます。このとき、アドレスは全て文字参照に変換されます。
<a href="mailto:add ress@examp le.com">addr ess@exampl e.com</a>
これ、[email protected]です。
メールアドレス収集Bot対策なのかな？ あんまり意味はなさそうだけど。
エスケープ
記号のエスケープ
バックスラッシュ\でMarkdown記法の記号をエスケープできます。
\*literal asterisks\*
範囲のエスケープ
前述しましたが、<div> ... </div>等のブロック要素で括るとMarkdown記法は全て無視され、その中は素通しになります。インライン要素は有効なままです。
<div>ここは[リンク](http://example.com)になりません。</div> <span>ここは[リンク](http://example.com)になります。</span>
Markdownによる変換が邪魔なときは<div />で括りましょう。他にも<p />や<table />も有効です。