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

前回までのあらすじ

Env

Windows 10, php 7.2.33(XAMPP), phpstorm

michelf/php-markdown

Composerでインストール。

# php composer.phar require michelf/php-markdown
Using version ^1.9 for michelf/php-markdown
./composer.json has been created
Running composer update michelf/php-markdown
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
  - Locking michelf/php-markdown (1.9.0)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Downloading michelf/php-markdown (1.9.0)
  - Installing michelf/php-markdown (1.9.0): Extracting archive
Generating autoload files

C#のときと同じ2ファイル(md,画像)をindex.phpと同ディレクトリに配置(vendorも同じとこ)。css/jsはそのC#のやつからまるっと持ってきただけ。pre, codeのclass="language-hoge"はどうやるんだ？と調べたら下記のようにやればいいらしい。

index.php

<?php
require_once __DIR__ . '/vendor/autoload.php';

//use Michelf\Markdown;
use Michelf\MarkdownExtra;

$mdText = file_get_contents('./test.md');

//$md = new Markdown();
$md = new MarkdownExtra();
$md->code_class_prefix = "language-";

$html = $md->transform($mdText);
?>
<!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>
        <?= $html ?>
    </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>

結果

c#版とほぼ同じ。手軽さはこちらが上のような印象だったが、それは勘違い。phpがこんなソースコードで動いちゃうのがおかしい(褒めてる)んだよ。実際はWAF使うしなあ……。次はgoデース！

追記

mdの最後に

<script>alert();</script>

と書いてみたがフッツーーーにダイアログ出るよねそりゃ。これはc#のほうも同じ。escape処理は自前？またはライブラリに側にあるかを調べないといけないな。