{include file="Public/header2" /}

<div class="page-container">
    <div class="markdown-container">
        <div class="markdown-content" id="markdown-content">
        </div>
    </div>
</div>

{include file="Public/footer" /} 
<!-- 引入markdown-it库 -->
<script src="/js/markdown-it.min.js"></script>
<style>
    .markdown-container {
        padding: 20px;
        padding-top: 5px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 1px 1px rgba(0,0,0,.05);
    }
    .markdown-content {
        margin-top: 20px;
        border-top: 1px solid #eee;
        padding-top: 20px;
    }
    .markdown-content img {
        max-width: 100%;
    }
    .markdown-content table {
        border-collapse: collapse;
        width: 100%;
        margin-bottom: 15px;
    }
    .markdown-content table, .markdown-content th, .markdown-content td {
        border: 1px solid #ddd;
    }
    .markdown-content th, .markdown-content td {
        padding: 8px;
        text-align: left;
    }
    .markdown-content th {
        background-color: #f5f5f5;
    }
    .markdown-content pre {
        background-color: #f8f8f8;
        padding: 10px;
        border-radius: 3px;
        overflow-x: auto;
    }
    .markdown-content code {
        font-family: Consolas, Monaco, 'Andale Mono', monospace;
        background-color: #f8f8f8;
        padding: 2px 4px;
        border-radius: 3px;
    }
</style>

<script>
    // 初始化markdown-it
    var md = window.markdownit({
        html: true,        // 启用HTML标签
        breaks: true,      // 转换回车符为<br>
        linkify: true,     // 自动转换URL为链接
        typographer: true  // 启用一些语言中立的替换 + 引号美化
    });
    
    // 获取markdown内容并渲染
    var content = `{$content|raw}`;
    document.getElementById('markdown-content').innerHTML = md.render(content);
</script>