打造像github的Apache在线PHP版markdown阅读器（续）—— 侧边栏显示自动产生的书签

本文介绍了如何创建一个Apache在线PHP版的Markdown阅读器，实现侧边栏显示自动书签的功能。通过下载并修改simple-sidebar库，结合ParseDown.php处理Markdown内容，添加span标签和JavaScript代码，最终实现类似GitHub的阅读体验。通过调整CSS样式，完善了导航和侧边栏的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打造Apache在线PHP版markdown阅读器 —— 侧边栏显示自动产生的书签

依上文处理，浏览器中打开markdown文件，仍然有小小的缺憾：要是像阅读PDF文件一样，侧边显示书签就好了。在html中，组合使用锚点和span标签可以做到这一点

<span id="tag-1-2-3-4-5">
<a class='close-sidebar' href='#xxxx">

下文说明怎么做到这样的功能。

思路

在浏览器中阅读markdown文件时，右侧显示一个侧边栏，侧边栏中显示自动产生的书签，最好是侧边栏是一个图标，点开图标显示侧边栏。侧边栏固定或浮动在网页上的某个固定位置，滚动时不消失。
在github.com中搜索了一阵sidebar相关的开源代码，发现simple-sidebar比较接近上述需求。

下载 simpler-sidebar

下载url: https://github.com/simple-sidebar/simpler-sidebar/releases

然后，将其demo和dist目录下的文件拷贝到htdocs目录

mkdir xxx/htdocs/md/asset/sidebar
cp    -rf simpler-sidebar-master/demo/assets xxx/htdocs/md/asset/sidebar
cp    -rf simpler-sidebar-master/demo/assets/css/amin.css xxx/htdocs/md/asset/sidebar/sidebar.css
cp    simpler-sidebar-master/dist     xxx/htdocs/md/asset

修改ParseDown.php文件

为H1、H2、H3添加span标签

步骤一: 添加变量span_index_n

class Parsedown
{
   
   
    # ~
    const version = '1.8.0-beta-5';
	protected $blk_no = 0;

步骤二: 添加span标签

    protected function blockHeader($Line)
    {
   
   
        $level = strspn($Line['text'], '#');

        if ($level > 6)
        {
   
   
            return;
        }

        $text = trim($Line['text'], '#');

        if ($this->strictMode and isset($text[0]) and $text[0] !== ' ')
        {
   
   
            return;
        }

        $text = trim($text, ' ');

        // 如果已有span，则保留原来的span，否则，自动产生一个
        $this->span_index_n++;
		$temp = strstr($text, "<span") ? $text : ('<span id="wz-h-' . $this->span_index_n .'">' . $text);

        $Block = array(
            'element' => array(
                'name' => 'h' . $level,
                'handler' => array(
                    'function' =>