[Elixir+Phoenix]PhoenixでもMarkdownしたい

# Goal
Phoenixを使ったWebサーバで、Markdown記法の文字列を扱えるようにする。

# Dev-Environment
OS: Windows8.1
Erlang: Eshell V6.4, OTP-Version 17.5
Elixir: v1.0.4
Phoenix Framework: v0.13.1
Earmark: v0.1.17
highlight.js: v8.6

# Wait a minute
前にブログで書いた記事を転載してます。

Elixirのライブラリに、[Github - pragdave/earmark](https://github.com/pragdave/earmark)と言うライブラリがあります。
Markdown記法で書かれた文字列をhtmlに変換してくれるライブラリのようです。

かなりシンプルな内容になると思います。
参考になれば幸いです。

全部やるとこんな感じになります。

![earmark_sample.png](https://qiita-image-store.s3.amazonaws.com/0/80934/d77be3c7-4e0e-2589-4451-4613efd4a2b1.png)

# Index
Earmark sample
|> Create Project
|> Preparing for use
|> Let's use
|> Raw HTML
|> Extra

## Create Project
サンプル用のプロジェクトを作成する。

```cmd
>cd プロジェクト作成ディレクトリ
>mix phoenix.new earmark_sample
>cd earmark_sample
>mix phoenix.server
>ctrl+c
```

## Preparing for use
ライブラリを利用する準備をする。

ファイル: mix.exs
earmarkライブラリを追加します。

```elixir
defp deps do
  [...
   {:earmark, "~> 0.1.17"}]
end
```

依存関係の解決。

```cmd
>mix deps.get
Running dependency resolution
Dependency resolution completed successfully
  earmark: v0.1.17
* Getting earmark (Hex package)
Checking package (https://s3.amazonaws.com/s3.hex.pm/tarballs/earmark-0.1.17.tar)
Using locally cached package
Unpacked package tarball (c:/Users/Takes_000/.hex/packages/earmark-0.1.17.tar)
```

準備終わり。

## Let's use
earmarkライブラリを使います。

ファイル: web/views/page_view.ex
Markdownの文字列を変換する関数を追加。

```elixir
def parse_markdown(markdown) do
  Earmark.to_html(markdown)
end
```

ファイル: web/templates/page/index.html.eex
以下の記述をテンプレートへ追加。

```html
<div>
  <%= parse_markdown(@markdown) %>
</div>
```

ファイル: web/controllers/page_controller.ex
indexアクションを以下のように編集。

```elixir
def index(conn, _params) do
  markdown = """
  # h1 Title
  ## h2 Title

  `EarmarkSample.PageController`

  ```elixir
  defmodule EarmarkSample.PageView do
    use EarmarkSample.Web, :view

    def markdown_to_html(markdown) do
      Earmark.to_html(markdown)
    end
  end
  ` (←`を3つ記述、投稿ページのMarkdownで記述できないため)
  """

  render conn, "index.html", markdown: markdown
end
```

実行して確認してみましょう！！

...あれれ？生のHTMLが表示されてしまいました。
何がいけなかったのでしょう？

## Raw HTML
Phoenixでは生のHTMLを表示する場合、
以下のようにしなければいけません。

ファイル: web/templates/page/index.html.eex
以下の記述をテンプレートへ追加。

```html
<div>
  <%= parse_markdown(@markdown) |> raw %>
</div>
```

Description:
phoenix_htmlライブラリには、raw/1と言う関数があります。
生のHTMLはデフォルトでは退避されてしまうので、
そのまま利用したい場合は、raw/1関数を利用しましょう。

## Extra
ソースコードに色(ハイライト)が欲しいとは思いませんか？
そうですよね・・・白黒でソースコード作成したり見たりするのはおかしいですよね・・・
(つい最近まで、Elixirのソースコードを白黒で編集してたなんて言えない・・・)

自分でCSSを作成しますか？
そんな面倒なことはしたくありません！！

ハイライトができるようになる素晴らしいJavaScriptがあります！！
ダウンロード: [highlight.js](https://highlightjs.org/)

ここから一式をダウンロードして来て下さい。
(Elixirのチェックを付けるのを忘れないで！！)

解答したディレクトリ構成は以下のようになっていました。

```
ディレクトリ
|-styles/色々なCSS
|-CHANGES.md
|-highlight.pack.js
|-LICENSE
|-README.md
|-README.ru.md
```

この中のstylesとhighlight.pack.jsを
プロジェクトで以下のように配置して下さい。

jsの配置: priv/static/js/highlight.pack.js
cssの配置: priv/static/css/styles

配置後それぞれの読み込みを追加する。

ファイル: web/templates/layout/application.html.eex
CSSの読み込みを追加。

```html
<link rel="stylesheet" href="<%= static_path(@conn, "/css/styles/default.css") %>">
```

JavaScriptの読み込み追加。

```html
<script src="<%= static_path(@conn, "/js/highlight.pack.js") %>"></script>
<script>hljs.initHighlightingOnLoad();</script>
```

実行してみましょう！
わーい！ハイライトが付きました！！

# Speaking to oneself
ElixirでMarkdownを使う方法探していたんだ！良かった～。
Parserを自分で作るのはやりたくなかった(笑)

ライブラリの作者様には感謝です！！

# Bibliography
[Github - pragdave/earmark](https://github.com/pragdave/earmark)
[hexdocs - earmark](https://hex.pm/packages/earmark)
[stackoverflow - How to render raw HTML code in Phoenix Framework?](http://stackoverflow.com/questions/31560620/how-to-render-raw-html-code-in-phoenix-framework)
[highlight.js](https://highlightjs.org/)