如何通过浏览器端JavaScript直接渲染原生Markdown静态网站

不存在原生的Markdown语法或浏览器内置特性，能直接让浏览器加载.md文件时自动调用外部JavaScript进行渲染。因为浏览器默认会将.md文件识别为纯文本文件，只会原样展示内容，不会解析执行任何HTML或JavaScript代码。

以下方案可实现你的核心诉求：直接使用原生.md文件、支持浏览器/本地查看、JS启用时渲染为页面、禁用时显示原生Markdown、保留静态可索引链接。

1. 浏览器书签工具（Bookmarklet） #

编写一段JavaScript书签，打开任意.md文件后点击书签即可触发渲染：

• 书签代码抓取当前页面的Markdown文本内容
• 解析.md开头的#!标记，加载你指定的渲染脚本
• 读取[head.title]这类元数据，设置页面标题等属性
• 将Markdown转换为HTML并替换当前页面内容

示例书签代码框架（可按需修改）：

javascript:(function(){
  // 读取当前页面的Markdown文本
  const mdContent = document.body.textContent;
  // 解析开头#!指定的渲染脚本路径
  const renderScriptMatch = mdContent.match(/^#!(.*)\n/);
  const renderScriptUrl = renderScriptMatch ? renderScriptMatch[1] : '默认渲染脚本路径';
  
  // 创建并加载渲染脚本
  const script = document.createElement('script');
  script.src = renderScriptUrl;
  script.onload = function() {
    // 调用渲染函数处理Markdown内容
    renderMarkdown(mdContent);
  };
  document.head.appendChild(script);
})();

使用方式：

• 将上述代码添加为浏览器书签
• 打开任意.md文件（本地或Git托管平台的），点击书签即可完成渲染
• JS禁用时，页面仍显示原生Markdown内容

2. 本地轻量服务器脚本 #

如果主要在本地查看.md文件，可编写简单的本地服务器脚本，拦截.md请求并自动注入渲染逻辑：

• 以Python Flask为例的实现代码：

from flask import Flask, render_template_string, send_from_directory
import os

app = Flask(__name__)

# 渲染模板：注入渲染脚本与Markdown内容
RENDER_TEMPLATE = """
<!DOCTYPE html>
<html>
<head>
  <script src="{{ render_script_url }}"></script>
</head>
<body>
  <div id="markdown-content" style="display:none;">{{ md_content }}</div>
  <script>
    const mdContent = document.getElementById('markdown-content').textContent;
    renderMarkdown(mdContent);
  </script>
</body>
</html>
"""

@app.route('/<path:filename>')
def serve_file(filename):
    if filename.endswith('.md'):
        file_path = os.path.join(os.getcwd(), filename)
        with open(file_path, 'r', encoding='utf-8') as f:
            md_content = f.read()
        # 解析#!指定的渲染脚本路径
        render_script_url = '../site/main_render.js'
        script_match = md_content.match(/^#!(.*)\n/)
        if script_match:
            render_script_url = script_match[1]
        return render_template_string(RENDER_TEMPLATE, 
                                     md_content=md_content,
                                     render_script_url=render_script_url)
    else:
        return send_from_directory(os.getcwd(), filename)

if __name__ == '__main__':
    app.run(debug=True)

使用方式：

• 将脚本保存为md_server.py，放在.md文件所在目录
• 运行python md_server.py，在浏览器访问http://localhost:5000/Example.md即可查看渲染后的页面
• JS禁用时可直接打开.md文件查看原生内容

针对你给出的Example.md，上述方案可完美适配：

• 书签工具或本地服务器会解析开头的#!../site/main_render.js，自动加载指定渲染脚本
• 解析[head.title]等元数据，渲染时设置页面标题、作者等信息
• 保留原生Markdown内容，JS禁用时直接展示原始文本

内容的提问来源于stack exchange，提问作者DiegoJArg