Goal

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 라이브러리에는 Github - pragdave/earmark이라는 라이브러리가 있습니다.
Markdown 표기법으로 작성된 문자열을 html로 변환하는 라이브러리 인 것 같습니다.

꽤 간단한 내용이 될 것 같아요.
도움이되면 다행입니다.

전부 하면 이런 느낌이 듭니다.

색인

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이 표시되었습니다.
무슨 일이 없었을까요?

원시 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