2015年7月25日

[Elixir+Phoenix]Display of Markdown in Phoenix (with highlight.js)

Goal

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

今後、自分で作成するWebサービスで導入するので、
動作検証を兼ねて遊んでみようと思います。

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

Index

Create Project

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

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

Preparing for use

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

ファイル: mix.exs
ライブラリの追加。

defp deps do
  [{:phoenix, "~> 0.13.1"},
   {:phoenix_ecto, "~> 0.4"},
   {:postgrex, ">= 0.0.0"},
   {:phoenix_html, "~> 1.0"},
   {:phoenix_live_reload, "~> 0.4", only: :dev},
   {:cowboy, "~> 1.0"},
   {:earmark, "~> 0.1.17"}]
end

依存関係の解決。

>mix deps.get
** (Mix) No package version in registry matches earmark > 0.1.17 (from: mix.exs)

C:\MyWorkSpaces\darui_works_local\elixir_space\earmark_sample>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

本題です。ライブラリを使います。

ファイル: 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(←`を3つ記述、退避の問題)
  defmodule EarmarkSample.PageView do
    use EarmarkSample.Web, :view

    def markdown_to_html(markdown) do
      Earmark.to_html(markdown)
    end
  end
  ` (←`を3つ記述、退避の問題)
  """

  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と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>

ソースコード全体。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Hello Phoenix!</title>
    <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
    <link rel="stylesheet" href="<%= static_path(@conn, "/css/styles/default.css") %>">
  </head>

  <body>
    <div class="container" role="main">
      <div class="header">
        <ul class="nav nav-pills pull-right">
          <li><a href="http://www.phoenixframework.org/docs">Get Started</a></li>
        </ul>
        <span class="logo"></span>
      </div>

      <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
      <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>

      <%= @inner %>

    </div> <!-- /container -->
    <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
    <script>require("web/static/js/app")</script>
    <script src="<%= static_path(@conn, "/js/highlight.pack.js") %>"></script>
    <script>hljs.initHighlightingOnLoad();</script>
  </body>
</html>

わーい！ハイライトが付きました！！

Speaking to oneself

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

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

Bibliography

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

Code of Resistance!!

ページ