语法突出显示在 Jekyll 的 MD 文件中不起作用？

Question

在使用 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(' ');  
}
```

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

config.yml:

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

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

Answer 1

因为你正在使用 kramdown 那么你需要使用 ~~~ 使其突出显示 code block 样本：

在这种情况下：

~~~ 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(' '); 
 }
~~~

使用 IAL 的 Anoche 方法：

~~~
//Code
~~~ 
{: .language-javascript}

Answer 2

你也可以把代码包装在 {%highlight javascript%}... {%endhighlight%} 块。

Answer 3

Fenced 代码块仅适用于 Kramdown::kramdown（使用 ~~~）和 Kramdown::GFM（使用 ~~~ 或反引号）解析器 (see kramdown doc)。

如果你想使用它们，你可以在_config.yml中设置kramdown解析器：

kramdown:
  input: GFM

Answer 4

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

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

highlighter 和 markdown 处理器 已在 _config.yml
生成的 html 文件可以访问 CSS highlighting-syntax 样式规则

1。荧光笔和降价处理器配置

从 jekyll 3.0 开始，Kramdown 作为 Markdown 引擎，Rouge 作为语法高亮器。是 default jekyll setting, and the only setting supported by github pages.

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

# Conversion
markdown:    kramdown
highlighter: rouge

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

2。代码高亮样式：

生成的 html 文件 应该可以访问 CSS code-highlighting 规则，这取决于您正在使用的主题与.

一种方法是在 css 主文件中定义 code-highlighting 样式规则，然后将该文件包含在 [=61] 的 html 头部=]默认布局.

定义 CSS code-highliting 规则

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

为了快速检查，我在此 repo

中添加了一些 scss code-highlighting 主题

克隆sass-code-highlight回购
将 sass-code-highlight 文件夹放入 sass 目录（默认：_sass）
将 code-highlight 导入主 css 文件

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

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

在 HTML HEAD

中包含 Main CSS

您需要在默认布局中使用下面的 sinppet (_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>

注意：确保css path有效。

语法突出显示在 Jekyll 的 MD 文件中不起作用？

Syntax highlighting not working in MD files for Jekyll?

jekyll

1。荧光笔和降价处理器配置

2。代码高亮样式：

定义 CSS code-highliting 规则

在 HTML HEAD