像 GitHub 一样渲染 Markdown

admin 编程 暂无评论 319 浏览
个人一直比较喜欢 GitHub 的 Markdown 渲染风格，支持的语法和语法高亮更多而且代码看起来十分舒服。但是有时候想写点东西在自己的网站上展示出来，之前使用的方案是用 sublimetext-markdown-preview 这个插件生成 HTML ，生成的时候选择 GitHub ，然后把 HTML 文件传到主机上显示。然而现在换用 atom 了， 它自带的渲染并不是很好看。一堆 HTML 维护起来也不太方便，于是就有了这个。首先我使用的是 Nginx + php-fpm ，Apache 应该也可以搞定。

GitHub 有渲染 Markdown 的 API ，官方文档在 这里 ，既然有那就直接拿来用好了，反正 VPS 在美国请求 GitHub 不成问题。但是这个 API 只渲染出一个 HTML 框架，还需要 CSS 样式表， sublimetext-markdown-preview 自带了一份这样的 CSS 样式表 。

然后用 PHP 发送请求，把返回的结果显示出来就好。

md.php

<?php
// 参数检查代码省略，然而这是必须的，否则你的 VPS 将会有后顾之忧

function curl_raw($url, $content) {
    $curl = curl_init($url);
    curl_setopt($curl, CURLOPT_HEADER, false);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_HTTPHEADER,
        array("Content-type: application/json",
              "User-Agent: " . $_SERVER['HTTP_USER_AGENT']));
    curl_setopt($curl, CURLOPT_POST, true);
    curl_setopt($curl, CURLOPT_POSTFIELDS, $content);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);

    $json_response = curl_exec($curl);

    $status = curl_getinfo($curl, CURLINFO_HTTP_CODE);

    curl_close($curl);

    return $json_response;
}

$markdown_filename = $_GET['f'];

$markdown_text = file_get_contents($markdown_filename);

$render_url = 'https://api.github.com/markdown';

$request_array['text'] = $markdown_text;
$request_array['mode'] = 'markdown';

$html_article_body = curl_raw($render_url, json_encode($request_array));

echo '<!DOCTYPE html><html><head><meta charset="utf-8"><title>' . $markdown_filename . '</title><link rel="stylesheet" href="/md_github.css" type="text/css" /></head>';
echo '<article class="markdown-body">';
echo $html_article_body;
echo '</article></body></html>';

 

 

把这个md.php和上面提到的样式表md_github.css放在域名根目录，在 Nginx 配置中增加对 md 文件的配置，把所有对 md 文件的请求 rewrite 到这个 php ，这样就可以在 Markdown 里正常使用相对路径了。

nginx.conf

location ~ \.md$ {
   rewrite ^/([^?]*)(?:\?(.*))? /md.php?f=$1&$2 last;
}

 

 

还可以把index.md和README.md添加为 index ，访问更加方便。

nginx.conf

location / {
  root /var/www/html;
  index index.html index.md README.md;
}

 

 

于是就大功告成了。具体效果见

http://haruue.moe/AndroidFAQ/
http://haruue.moe/NdlessNote/

 

最后更新于 2022年6月26日

相关博文

像 GitHub 一样渲染 Markdown
赏
标签: