其实GitHub Issue里那些好用的文本样式，本质就是Markdown语法。只要让你的自有站点支持Markdown解析，就能轻松复刻这些效果。我给你一步步拆解怎么实现：

• 第一步：选个Markdown解析工具
  浏览器本身不认识Markdown语法，得先把它转换成HTML才能正常显示。根据你的站点技术栈选合适的工具：

  • 前端渲染：可以用轻量的marked.js、灵活的remarkable或者易上手的Showdown，都是纯JS库，直接本地引入就行。
  • 后端渲染：如果是Python站点用markdown库，Node.js站点用marked，Java可以用CommonMark，在后端把Markdown转成HTML再返回给前端。

• 第二步：对应样式的实现与美化
  解析后的Markdown会变成标准HTML标签，你只需要用CSS自定义这些标签的样式，就能和GitHub风格对齐：

  • 行内代码（文本）：解析后是<code>标签，给它加浅灰背景、圆角、等宽字体：

    code {
      background-color: #f6f8fa;
      padding: 2px 6px;
      border-radius: 3px;
      font-family: "Consolas", "Monaco", monospace;
    }
    

  • 加粗文本（文本）：解析后是<strong>标签，默认就是加粗，你可以调整字体粗细或者颜色：

    strong {
      font-weight: 600;
      color: #24292f;
    }
    

  • 引用文本（> 文本）：解析后是<blockquote>标签，加左侧边框、浅灰文字和斜体：

    blockquote {
      border-left: 4px solid #d1d9e0;
      padding-left: 16px;
      color: #656d76;
      font-style: italic;
      margin: 16px 0;
    }
    

  • 列表（- 列表项）：解析后是<ul>和<li>标签，自定义符号和缩进：

    ul {
      list-style-type: disc;
      padding-left: 24px;
      margin: 12px 0;
    }
    

  • 标题（# 一级标题）：解析后是<h1>到<h6>标签，模仿GitHub的层级样式：

    h1 {
      font-size: 2em;
      border-bottom: 1px solid #eaecef;
      padding-bottom: 8px;
      margin: 24px 0 16px;
    }
    h2 {
      font-size: 1.5em;
      border-bottom: 1px solid #eaecef;
      padding-bottom: 4px;
      margin: 24px 0 16px;
    }
    

• 第三步：简单的前端实现示例
  如果你是纯前端站点，用marked.js做个实时预览的例子很简单：

  <div class="markdown-container">
    <textarea id="md-input" placeholder="输入Markdown内容试试..."></textarea>
    <div id="md-output"></div>
  </div>
  
  <script src="marked.min.js"></script>
  <script>
    const input = document.getElementById('md-input');
    const output = document.getElementById('md-output');
  
    // 实时解析渲染
    input.addEventListener('input', () => {
      output.innerHTML = marked.parse(input.value);
    });
  </script>
  

  把上面的CSS样式加上，就能立刻看到和GitHub Issue一样的效果了。

• 额外提示
  如果想要更完整的GitHub风格，包括多行代码块的语法高亮，可以搭配highlight.js这类工具，它能给不同编程语言的代码加上和GitHub一致的高亮效果。

这样就能在你的自有站点上实现和GitHub Issue一模一样的文本样式啦！根据你的站点技术栈选合适的解析工具，再调整CSS就能完全自定义样式~

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