语法高亮在 Jekyll 的 MD 文件中不起作用？

2024-01-12

使用 kramdown 解析器和 rouge gem 时，语法荧光笔似乎无法在 Jekyll 中工作。引号也不会突出显示和格式化。

标记文件：

```javascript
function order(words){
  var array = words.split(' ');
  var result = array.slice();

  for (word in array) {
    for (var i = 0; i < array[word].length; i++) {
       if (!isNaN(array[word][i])) {
         result[array[word][i] - 1] = array[word]
       }
     }
   }return result.join(' ');  
}
```

下面列出了我的配置文件。

配置.yml：

# Build settings
markdown: kramdown
highlighter: rouge
theme: minima
gems:
  - jekyll-feed

include: ['_pages']
exclude:
  - Gemfile
  - Gemfile.lock
  - vendor
#sass
sass:
  style: compressed

您的 Markdown 文件语法很好，您不需要更改它（请查看下面的我的评论）

要使代码突出显示正常工作，您需要检查两件事：

the 荧光笔和降价处理器已正确配置在_config.yml
生成的html文件可以访问CSS突出显示语法样式规则

1.荧光笔和Markdown处理器配置

从 jekyll 3.0 开始，Kramdown 作为 Markdown 引擎，Rouge 作为语法荧光笔。是默认 jekyll 设置 https://jekyllrb.com/docs/configuration/，并且唯一支持的设置github 页面 https://github.com/blog/2100-github-pages-now-faster-and-simpler-with-jekyll-3-0.

所以你可以删除它们的相关设置，或者在_config.yml如下：

# Conversion
markdown:    kramdown
highlighter: rouge

# Markdown Processors
kramdown:
  input: GFM
  auto_ids: true
  syntax_highlighter: rouge

2.代码高亮样式：

生成的html文件应该有权访问CSS 代码突出显示规则，这取决于您正在使用的主题。

一种方法是在主 css 文件中定义代码高亮样式规则，然后将该文件包含在默认布局.

定义CSS代码高亮规则

确保主 CSS 文件（位于/assets/css，并且通常命名为main.scss or style.scss）定义了一些代码突出显示 CSS 规则，可以在此处显式定义，也可以通过导入包含 CSS 规则的文件（scss、sass 或 less）来定义。

为了快速检查，我在其中放置了一些 scss 代码突出显示主题repo https://github.com/yaitloutou/sass-code-highlight

clone sass 代码高亮 https://github.com/yaitloutou/sass-code-highlight repo
put sass-code-highlightsass 目录中的文件夹（默认情况下：_sass)
将代码高亮导入到主 css 文件中

in assets/css/main.scss添加以下内容：

    @import "sass-code-highlight/monokai"; // 'monokai' as example

在 HTML HEAD 中包含主要 CSS

您需要在默认布局中包含以下代码片段（_layouts/default.html)

<head>
  <!-- head stuff-->

  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="{{site.baseurl}}/assets/css/main.css"> <!-- IMPORTANT -->
</head>

直接或通过包含head.html文件 - 位于_includes目录-进入其中，如下：

<!DOCTYPE html>
<html lang="en">
  {% include head.html %} <!--  <- include the head -->
  <body>
  {{ content }}
  </body>
</html>

Note：确保css path已验证。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Jekyll