[go] というわけでMarkdown -> Htmlを試してみる

前回までのあらすじ

Env

Windows 10, go 1.15.15, Visual Studio Code

blackfriday

ginをベースにしたwebアプリケーションにblackfridayをを載せただけ。

PS E:\gitwork\_go\md-to-html> go mod init md-to-html
PS E:\gitwork\_go\md-to-html> go get -u github.com/gin-gonic/gin
PS E:\gitwork\_go\md-to-html> go get -u github.com/russross/blackfriday

mdと画像はrootではなく/assetsディレクトリを作って入れた。ベースのtemplateは前回のsourceをちょこっと変えただけ。pre,codeのclass=language-hogeについては、MarkdownCommon()のほうを呼べばよしなにやってくれるみたい。よく調べてないが手探りで。

main.go

package main

import (
    "fmt"
    "html/template"
    "io/ioutil"
    "net/http"

    "github.com/gin-gonic/gin"
    "github.com/russross/blackfriday"
)

func main() {
    gin.SetMode(gin.ReleaseMode)
    engine := gin.Default()
    // 静的ファイル
    engine.Static("/assets", "./assets")
    engine.LoadHTMLGlob("templates/*")
    engine.GET("/", index)
    engine.Run(":9001")
}

func index(c *gin.Context) {
    mdBytes, err := ioutil.ReadFile("./assets/test.md")
    if err != nil {
        fmt.Println(err)
        return
    }
    //html := string(blackfriday.MarkdownBasic(mdBytes))
    html := string(blackfriday.MarkdownCommon(mdBytes))
    c.HTML(http.StatusOK, "index.html", gin.H{
        "content": template.HTML(html),
    })
}

templates/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>php markdown</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel='stylesheet' id='prism-css-0-css'  href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism-okaidia.min.css?ver=1.15.0' type='text/css' media='all' />
    <link rel='stylesheet' id='prism-css-1-css'  href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/plugins/line-numbers/prism-line-numbers.min.css?ver=1.15.0' type='text/css' media='all' />
</head>
<body>
<div class="container">
    <div>
        {{ .content }}
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-core.min.js?ver=1.15.0' id='prism-js-0-js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js?ver=1.15.0' id='prism-js-1-js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/plugins/line-numbers/prism-line-numbers.min.js?ver=1.15.0' id='prism-js-2-js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/plugins/autoloader/prism-autoloader.min.js?ver=1.15.0' id='prism-js-3-js'></script>
<script id="auto_loader_config_scripts"> Prism.plugins.autoloader.languages_path = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/"; </script>  <script id="module-prism-line-number"> (function($) { $(function() { $("code").each(function() { var parent_div = $(this).parent("pre"); var pre_css = $(this).attr("class"); if (typeof pre_css !== "undefined" && -1 !== pre_css.indexOf("language-")) { parent_div.addClass("line-numbers"); } }); }); })(jQuery); </script>
</body>
</html>

mdにある画像リンクもassetsに変更。

結果

result

まあ同じ。

前回に追記したが、mdのコードブロック外に

<script>alert();</script>

と書くと当然ダイアログ出ちゃうのよね。これは今までのc#, php, go全てで同じだし、なんと！現在使っているWordPressプラグインのWP Githuber MDでも同じ。"＆lt;script"(&はわざと全角にしてます)に置換とかいう雑な手もあるにはあるが、本気でやるならライブラリ調査->なければ自前エスケープなのかな。