使用Apache2 + PHP來讓你的網頁伺服器能直接顯示Markdown文件！
使用Apache2 + PHP來讓你的網頁伺服器能直接顯示Markdown文件！
現在網絡上Markdown文件的使用越來越廣，身為工程師想必一定接觸過Markdown文件。在GitHub上Markdown文件能直接渲染成格式化文件顯示，那你有沒有想過在自己的網頁伺服器上也能直接渲染？
假設我們瀏覽https://example.com/about.md，沒處理前，伺服器只會原封不動的把Markdown檔案丟給你，瀏覽器只認HTML不認Markdown，結果只會顯示一堆意義不明的語法（對不懂Markdown的使用者來說）。
（處理前後對比）
首先需要先下載php的相依Library用來把Markdown文件轉換成HTML，我選用了Parsedown開源程式庫。請按照它的介紹來進行安裝到你的伺服器上。
上面的程式庫並不能將Markdown裏面的程式碼上色，但身為工程師，看著沒上色的程式碼超傷眼睛，所以我們另外用highlightjs在前端進行程式碼上色。你可以選擇把程式庫下載到自己的伺服器上或者使用提供的CDN。
接下來我們先設定Apache2，讓它把.md檔案交給我們來處理。你可以選擇把下面的設定放在apache2.conf、你的vhost設定檔或者是.htaccess。用你喜歡的編輯器打開設定檔。
<FilesMatch "\.md$">
RewriteEngine On
RewriteRule ^(.*)$ /path/to/your/handler.php [QSA,L]
</FilesMatch>
紅色的檔案路徑是我們用來處理Markdown文件的php程式，不過我們還沒建立它，所以你可以先想一下要放在哪裡，然後把完整路徑填上去。
如果你不是使用.htaccess，設定好後要重啟一下Apache2，讓上面的設定生效。
sudo systemctl restart apache2
完成伺服器的設置後，我們來開始寫處理Markdown文件的php程式。請按照上面設定伺服器時填的路徑建立檔案。注意我這裡是使用直接下載的方式來安裝Parsedown。
<?php
error_reporting(0); //按照需要注解掉方便debug
header("Content-Type: text/html; charset=UTF-8");
$lib_path = "/path/to/library/";
$web_root = "/path/to/webroot";
require_once($lib_path.'Parsedown.php');
$path = $web_root . preg_replace('/\?.*/', '', urldecode($_SERVER['REQUEST_URI']));
if (file_exists($path) && strtolower(pathinfo($path)['extension']) === 'md'){
$md = file_get_contents($path);
if ($md !== false){
$md = preg_replace('/\\\([\n\r]+)/', ' $1', $md); // Convert \<Enter> to double space
$mdParser = new Parsedown();
$body = $mdParser->text($md);
$title = basename($_SERVER['REQUEST_URI']);
}
}else{
http_response_code(404);
readfile($web_root . "/404.html");
die();
}
?>
上面紅色的地方需要根據你的伺服器環境來進行修改。
$lib_path指去你放置Parsedown程式庫的資料夾，結尾要加上"/"。如果你是使用composer的方式來安裝Parsedown，可以無視這個變數。另外請自己把下面的require_one(...)整行刪掉。
$web_root指去你網頁伺服器的根目錄，結尾不要加上"/"。
（怎麼那麼奇怪一個要加"/"一個不用？因為我寫程式很爛=w=b）
404.html可以放一個自訂的404頁面。如果你不需要404頁面也可以直接把readfile注解掉。
上面寫好之後，我們完成了php程式的部分。但這時你跑去瀏覽器開Markdown檔案會發現沒東西出現，因為前端部分我們還沒寫。我這邊會直接把前端HTML放在php程式的後面。如果你有不錯的模版渲染器，也可以自行使用。
我們需要的資料都存在$title和$body這兩個變數。在php close tag（?>）後接上下面的HTML。（這個是精簡版本的HTML，好孩子請根據標準來補全所有的tags，例如<html>）
<head>
<title><?=$title?></title>
</head>
<body>
<div class="markdown-body"><?=$body?></div>
</body>
注：<?=$var?>是精簡語法，等同<?php echo $var?>
這樣就完成了最簡單的Markdown文件處理。
不過說好的程式碼上色呢？
在<head>加上以下程式碼，從CDN載入highlightjs的檔案：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.2/build/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.2/build/highlight.min.js"></script>
然後在</body>的上一行插入：
<script>hljs.highlightAll();</script>
網誌管理員已經移除這則留言。
回覆刪除網誌管理員已經移除這則留言。
回覆刪除網誌管理員已經移除這則留言。
回覆刪除網誌管理員已經移除這則留言。
回覆刪除網誌管理員已經移除這則留言。
回覆刪除網誌管理員已經移除這則留言。
回覆刪除