Jekyll转换Markdown到HTML时为何在<code>标签内添加多余空格？

问题原因 #

这个多余空格是Jekyll默认依赖的语法高亮工具Rouge在处理内联代码时的格式化产物。Rouge会把cd识别为shell内置命令并加上高亮标记（<span class="nb">cd </span>），拼接后续参数blog时意外引入了多余空格。

解决方案 #

以下是几个可行的处理办法，按需选择：

• 全局禁用内联代码高亮
  在站点的_config.yml文件中添加或修改配置，关闭kramdown的语法高亮功能：

  kramdown:
    syntax_highlighter_opts:
      disable: true
  

  配置后所有<code>标签或Markdown内联代码（`xxx`）都会原样输出，不会被拆分和插入多余空格。

• 单独跳过某段代码的处理
  如果需要保留其他代码的高亮效果，仅让这段代码原样输出，可使用Jekyll的raw标签包裹：

  {% raw %}<code>cd blog</code>{% endraw %}
  

  这段代码会被Jekyll跳过处理，直接生成原始的<code>cd blog</code>。

• 改用Markdown原生内联代码语法
  尝试用Markdown原生的内联代码写法（`cd blog`）替代HTML的<code>标签，部分场景下kramdown对Markdown语法的处理更严谨，不会引入多余空格。

• 调整Rouge的格式化参数
  若要保留高亮同时去掉空格，可在_config.yml中修改Rouge的配置：

  rouge:
    formatter: html
    options:
      wrap: false
  

  该配置会让Rouge不再额外包裹高亮内容，减少不必要的空格插入。

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