phoenix-powerSlimを使ってみました。

Slimは、こんな感じで記述していきます。

test.slim
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
| ---
  layout: default
  ---

div.heading#toc
  h2 目次

div class="section toc"
  div.col
    h4
      a href="#character" 登場人物
    ul
      li
        a href="#character-yui" 月詠 唯(つくよみ ゆい)
      li
        a href="#character-sakura" 宮本 桜(みやもと さくら)
  div.col
    h4
      a href="#world" 世界観
    ul
      li
        a href="#world-city" 魔法都市
      li
        a href="#world-japan" 日本

div.section#golden-rule
  div.col
    h4 一人の少女が世界を変えた物語

  div.col
    blockquote この物語はフィクションです。

div.heading#character
  h2 登場人物

div.section#character-yui
  div.col
    h3 月詠 唯(つくよみ ゆい)
    ul
    p サボテンを持つ、黒髪の少女。いつも目を閉じている。見た目は7歳の女の子だが、年齢不詳
  div.col
    | {% highlight sh %}{% include txt/character-yui.txt %}{% endhighlight %}

div.heading#world
  h2 世界観

div.section#world-city
  div.col
    h3 魔法都市
    ul
    p 魔法都市は、有能な魔法使い7人によって創設され、人口の7割が17歳以下で占める近代急成長している一国。ただし、世界政府からは国として認められていない
  div.col
    | {% highlight sh %}{% include txt/world-city.txt %}{% endhighlight %}

div.section#world-japan
  div.col
    h3 日本
    p 現在、魔法都市がある地区だが、かつては日本と呼ばれていた。現在は大半の地域が壊滅している
  div.col
    | {% highlight sh %}{% include txt/world-japan.txt %}{% endhighlight %}

そして、例えば、$ slimrb -p test.slim test.htmlコマンドを実行すると、以下のようになります。

test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
---
layout: default
---
<div class="heading" id="toc">
  <h2>
    目次
  </h2>
</div>
<div class="section toc">
  <div class="col">
    <h4>
      <a href="#character">登場人物</a>
    </h4>
    <ul>
      <li>
        <a href="#character-yui">月詠 唯(つくよみ ゆい)</a>
      </li>
      <li>
        <a href="#character-sakura">宮本 桜(みやもと さくら)</a>
      </li>
    </ul>
  </div>
  <div class="col">
    <h4>
      <a href="#world">世界観</a>
    </h4>
    <ul>
      <li>
        <a href="#world-city">魔法都市</a>
      </li>
      <li>
        <a href="#world-japan">日本</a>
      </li>
    </ul>
  </div>
</div>
<div class="section" id="golden-rule">
  <div class="col">
    <h4>
      一人の少女が世界を変えた物語
    </h4>
  </div>
  <div class="col">
    <blockquote>この物語はフィクションです。</blockquote>
  </div>
</div>
<div class="heading" id="character">
  <h2>
    登場人物
  </h2>
</div>
<div class="section" id="character-yui">
  <div class="col">
    <h3>
      月詠 唯(つくよみ ゆい)
    </h3>
    <ul></ul>
    <p>
      サボテンを持つ、黒髪の少女。いつも目を閉じている。見た目は7歳の女の子だが、年齢不詳
    </p>
  </div>
  <div class="col">
    {% highlight sh %}{% include txt/character-yui.txt %}{% endhighlight %}
  </div>
</div>
<div class="heading" id="world">
  <h2>
    世界観
  </h2>
</div>
<div class="section" id="world-city">
  <div class="col">
    <h3>
      魔法都市
    </h3>
    <ul></ul>
    <p>
      魔法都市は、有能な魔法使い7人によって創設され、人口の7割が17歳以下で占める近代急成長している一国。ただし、世界政府からは国として認められていない
    </p>
  </div>
  <div class="col">
    {% highlight sh %}{% include txt/world-city.txt %}{% endhighlight %}
  </div>
</div>
<div class="section" id="world-japan">
  <div class="col">
    <h3>
      日本
    </h3>
    <p>
      現在、魔法都市がある地区だが、かつては日本と呼ばれていた。現在は大半の地域が壊滅している
    </p>
  </div>
  <div class="col">
    {% highlight sh %}{% include txt/world-japan.txt %}{% endhighlight %}
  </div>
</div>

適当な記事ですいません。ちょっと触ってみただけなので、よく分かっていません。以下のものが便利です。

slim-template/vim-slim

マークアッパー的 Slim 入門21の手引き | e2esound.com業務日誌