27
Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介 - 本当に Markdown で十分ですか - Web : http:// lightweightmarkuplanguage.com Twitter : @ XJINE E-mail : [email protected] 初版 2014.05.14 - 最終更新 2014.05.26

Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

  • Upload
    xjine

  • View
    1.447

  • Download
    3

Embed Size (px)

DESCRIPTION

Markdown ユーザに向けて新しい軽量マークアップ言語 KARAS を紹介します。 KARAS は Markdown よりも美しく高機能です。このスライドでは Markdown にはない KARAS の良い所を短く紹介します。

Citation preview

Page 1: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

Markdown ユーザのあなたに

軽量マークアップ言語 KARAS の紹介

- 本当に Markdown で十分ですか -

Web : http://lightweightmarkuplanguage.com

Twitter : @XJINE

E-mail : [email protected]

初版 2014.05.14 - 最終更新 2014.05.26

Page 2: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

KARAS とは

• KARAS は新しい軽量マークアップ言語。

• ライセンスは BSD。

• C#, Ruby, Javascript, PHP と WordPress,

Jekyll で使えるプラグインが用意済み。

Page 3: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

KARAS の良いところ

• テキストや図を div などでグループ化できる。

• 図・音声・動画は同じ構文から適切に自動変換。

• 構文が記号シンプルで直感的。

• 機能を拡張することができる。

Page 4: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

利点-1 : グループ構文

Page 5: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

テキストや図をグループにする

{{ group

テキスト図・リスト・その他

}}

<div class=“group”>

テキスト図・リスト・その他

</div>

Page 6: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

グループ要素は指定できる

{{ header・・・}}

{{ figure・・・}}

{{ code :: lang-c・・・}}

<header>・・・</header>

<figure>・・・</figure>

<pre class=“lang-c”><code class=“lang-c”></code></pre>

Page 7: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

figure の見出しは figcaption に

{{ figure

= 見出し図・テーブル

}}

<figure><figcaption>見出し</figcaption>

図・テーブル</figure>

Page 8: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

テキストレベルでもグループ化

<<group :: テキスト>>

<<< group :: テキスト >>>

<span class=“group”>テキスト</span>

<span id=“group”>テキスト</span>

Page 9: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

利点-2 : リンク構文

Page 10: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

通常のリンク

(( url ))

(( url :: alias ))

<a href=“url”> url </a>

<a href=“url”> alias </a>

Page 11: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

メディアのリンク

(( image-url ))

((( image-url )))

<a href=“image-url”>image-url</a>

<img src=“image-url”>

Page 12: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

画像・音声・動画をリンク

((( image-url )))

((( audio-url )))

((( video-url )))

<img src=“image-url”>

<audio src=“audio-url”><object data=“audio-url”>・・・

<embed src=“audio-url”></object>

</audio>

<video src=“video-url”><object>・・・

<embed>・・・</video>

Page 13: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

パラメータの設定

((( audio :: loop ))) <audio src=“audio” loop><object data=“audio”>

<param name="loop“value="true">

<embed src=“audio”loop=“true”>

</object></audio>

Page 14: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

メディアリンクの補足

• URL の拡張子からメディアを判定して適切な形式に

• ネイティブ再生できないとき、プラグイン再生する構造。

• パラメータも内容を解析して適切に出力。

その他http://lightweightmarkuplanguage.com

Page 15: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

利点-3 : 直感的な構文

Page 16: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

記号は2つ以上、増えると強くなる

** b 要素 ** *** strong 要素 ***

// i 要素 // /// em 要素 ///

__ u 要素 __ ___ ins 要素 ___

%% s 要素 %% %%% del 要素 %%%

Page 17: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

分かりやすく直感的な記号

* Markdown *

‘’ Media Wiki ‘’

// KARAS ///// KARAS ///

<em> Markdown </em>

<em> Media Wiki </em>

<i> KARAS </i><em> KARAS </em>

Page 18: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

基本は同じ、増えると変わる構文

‘’ sup 要素 ‘’ ‘’’ ruby 要素 ‘’’

,, sub 要素 ,,

`` var 要素 `` ``` code 要素 ```

$$ kbd 要素 $$ $$$ samp 要素 $$$

Page 19: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

= h1~h6 要素 ======= hr

- ul/li 要素 -- ネスト

+ ol/li 要素 ++ ネスト

; dl/dt 要素 ;; dd 要素

行の先頭に書く構文

構文はこれですべてではありません。引用や出典など、良く使われる要素を出力するための構文が用意されています。

詳細はhttp://lightweightmarkuplanguage.com

Page 20: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

直感的な構文設計

• 記号から出力される結果をイメージできる。

• 記号は組み合わせがなく覚えやすい。

• インライン構文の記号は2つ以上。

• プレーンテキストでもパッと見で構文と分かる。

• 記号のエスケープを常に考慮しなくて良い。

• 空白文字列を使う構文は設計しない。可読性が低い。

Page 21: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

テーブル構文も限りなくシンプル

!| ヘッダ !| ヘッダ|| 通常 |< 左寄|> 右寄 |= 中央|| 横連 || ::|| 縦連 || 通常|| ::: || 通常

ヘッダ ヘッダ

通常 左寄

右寄 中央

横連

縦連通常

通常

Page 22: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

利点-4 : 構文と機能の拡張

Page 23: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

プラグイン構文で機能を追加

[[ 名前 :: テキスト :: オプション1 :: オプション 2 :: … ]]

[[lower :: TEXT]]

対応する名前のプラグインが実行される。引数はテキストとオプション。

text

Page 24: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

アクション型のプラグイン構文

[[[ 名前 :: オプション1 … ]]]

= head1== head2[[[ toc ]]]

対応する名前のプラグインが実行される。引数はアクション型構文が書かれたテキストの全てのテキストとオプション。

<ul><li> head1 <ul><li> head2</li></ul></li>

</ul>

Page 25: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

プラグインで LaTeX 系の数式も

[[[mathjax ::¥sum_{n=1}^{N}n = 1 + 2 + ¥cdots + (N-1) + N ¥tag{1}]]]

GitHub - MathJaxプラグインのページへMathJax は Apache 2.0 ライセンスです。Javascript が動作する環境に限られます。

𝒏=𝟏𝑵 𝒏= 1 + 2 + … + (N-1) + N (1)

Page 26: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

KARAS の悪いところ

• 産まれたばかり。世界は Markdown で動いている。

Page 27: Markdown ユーザのあなたに 軽量マークアップ言語 KARAS の紹介

Web : http://lightweightmarkuplanguage.com

Twitter : @XJINE

E-mail : [email protected]

初版 2014.05.14 - 最終更新 2014.05.26