[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と言うライブラリがあります。
Markdown記法で書かれた文字列をhtmlに変換してくれるライブラリのようです。

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

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

Index

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

Create Project

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

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

Preparing for use

ライブラリを利用する準備をする。

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

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

依存関係の解決。

>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の文字列を変換する関数を追加。

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

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

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

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

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
以下の記述をテンプレートへ追加。

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

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

Extra

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

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

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

ここから一式をダウンロードして来て下さい。
(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の読み込みを追加。

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

JavaScriptの読み込み追加。

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

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

Speaking to oneself

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

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

Bibliography

Github - pragdave/earmark
hexdocs - earmark
stackoverflow - How to render raw HTML code in Phoenix Framework?
highlight.js