打造像github的Apache在线PHP版markdown、C、Java文件阅读器
前言
网络上收集了一些.md格式的文章、博客，拷贝到本地硬盘上，期望有时间上慢慢翻看。然而，打开这些.c、、.cpp、.md、.java文件都需要打开vscode或者什么其他的工具，总感觉不怎么舒服。为什么不能像github一样，可以在浏览器中在线阅读呢？于是，有了以下这篇文章。
1. 开源的PHP markdown转html格式解析器
- SegmentFault的HyperDown https://github.com/SegmentFault/HyperDown
- php-markdown
- CommonMark for PHP
- Parsedown
PS: HyperDown、CommonMark、Parsedown这三个PHP解析器中，Parsedown解析之后的代码块最接近于highlight.js的代码块语法，因此，本文选用Parsedown。
1.1 httpd.conf
在httpd.conf 添加如下配置
Action markdown /md/handler/handler.php
AddHandler markdown .md
其中， /md/handler/handler.php 的位置在htdocs目录下
apache2\htdocs\md\handler
1.2 handler.php
<?php
// require('/md/handler/Parsedown.php');
require('Parsedown.php');
// require('Parser.php');
$file = realpath($_SERVER['PATH_TRANSLATED']);
$Parsedown= new Parsedown();
echo $Parsedown->text(file_get_contents($file));
// $parser = new Parser();
// echo $parser->makeHtml(file_get_contents($file));
?>
1.3 对parser的修改
1.3.1 对Parsedown的修改
function text($text)
{
$Elements = $this->textElements($text);
# convert to markup
$markup = $this->elements($Elements);
# trim line breaks
$markup = trim($markup, "\n");
$htmlstyle= '<html><head>
<meta charset="utf-8">
<link rel="stylesheet" title="Default" href="http://192.168.1.3/md/demo/styles/default.css">
<link rel="alternate stylesheet" href="http://192.168.1.3/md/demo/styles/vs.css">
<link rel="alternate stylesheet" href="http://192.168.1.3/md/demo/styles/xcode.css">
</head><body><div class="common">';
$htmltail = '</div>
<script src="http://192.168.1.3/md/asset/jquery-2.1.1.min.js"></script>
<script src="http://192.168.1.3/md/asset/hilight/highlight.pack.js"></script>
<script> hljs.initHighlightingOnLoad(); </script>
<script>
$(document).ready(function() {
$("pre code").each(function (t, i) {
var e = $(i);
var a = e.find("code");
a.hasClass("hljs") || hljs.highlightBlock(a.get(0)), e.show()
})
});
</script></body></html>';
//return $markup;
return $htmlstyle. $markup . $htmltail;}
查找 “language-”，ParseDown的输出像这样，为了使用highlight.js高亮代码，删除它:
<pre><code class "language-json">
修改如下：
if ($infostring !== '')
{
//$Element['attributes'] = array('class' => "language-$infostring");
$Element['attributes'] = array('class' => "$infostring");
}
2. 使用highlight.js对markdown中的代码块语法着色
highlight.js
下载highlight.js
npm install highlight.js
编译highlight.pack.js
cp -rf node_modules/highlight.js ~/htdocs/md/
cd ~/htdocs/md/highlight.js
node tools/build.js -t browser
mv -rf ./demo ..
mv highlight.pack.js ../asset
享用
重启Apache服务，本地目录中的.md文件被自动解析为html格式，且代码块自动语法着色。
3. 更进一步
在线打开C、C++、Java文件时，黑白的世界问题让人难受的，按以上方法，可以打造在线的源代码阅读器。
配置httpd.conf
添加handler
# Add for markdown parser
Action markdown /md/handler/handler.php
AddHandler markdown .md
# Add for parse as pseudo markdown stream (PHP不可在内，因已有解析器，否则Apache报错)
Action hlcodes /md/handler/hlcodes.php
AddHandler hlcodes .c .h .cpp .cc .hpp .go .java
添加静态资源配置
<IfModule alias_module>
#
# Redirect: Allows you to tell clients about documents that used to
# exist in your server's namespace, but do not anymore. The client
# will make a new request for the document at its new location.
# Example:
# Redirect permanent /foo http://www.example.com/bar
#
# Alias: Maps web paths into filesystem paths and is used to
# access content that does not live under the DocumentRoot.
# Example:
# Alias /webpath /full/filesystem/path
Alias /docs /root/docs
<Directory "/root/docs">
# Options Indexes FollowSymLinks
# AllowOverride AuthConfig
AllowOverride None
Options All
# Options Indexes MultiViews
Order allow,deny
Allow from all
Require all granted
</Directory>
# ... ...
hlcodes.php的代码
<?php
require('Parsedown.php');
$file = realpath($_SERVER['PATH_TRANSLATED']);
$Parsedown= new Parsedown();
$arry = explode(".", $file);
$count = count($arry);
if ($count > 0) {
$count = $count - 1;
} else {
$count = 0;
}
echo $Parsedown->text("```" . $arry[$count] . "\n" . file_get_contents($file) . "\n```");
?>
测试
重启Apache
拷贝几个.c、.h、.cpp, .go等格式的源代码文件，到/root/docs目录，然后，浏览器中打开http://localhost/docs/，现在，源代码已经着色了。
示例如下：
