使用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>

這樣就完成了。但看起來還是差一點,差了一點CSS。這個你可以自行Google適用於Markdown的HTML Stylesheet來用,我就不教了。

留言

  1. 網誌管理員已經移除這則留言。

    回覆刪除
  2. 網誌管理員已經移除這則留言。

    回覆刪除
  3. 網誌管理員已經移除這則留言。

    回覆刪除
  4. 網誌管理員已經移除這則留言。

    回覆刪除
  5. 網誌管理員已經移除這則留言。

    回覆刪除
  6. 網誌管理員已經移除這則留言。

    回覆刪除

張貼留言

這個網誌中的熱門文章

簡單繞過MDM限制

Netlanguage 如何取得答案