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

Question

语法高亮显示器似乎没有使用kramdown解析器和rouge gem在Jekyll中工作。报价也不会显示突出显示和格式化。

Markdown文件：

```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

您的Markdown文件语法没问题，您不需要更改它（请查看我的评论）

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

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

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

截至jekyll 3.0，Kramdown作为Markdown引擎，而Rouge作为语法荧光笔。是default jekyll setting，github pages支持的唯一设置。

因此，您可以删除相关设置，或在_config.yml明确设置，如下所示：

# Conversion
markdown:    kramdown
highlighter: rouge

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

2。代码突出显示样式：

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

这样做的一种方法是在主css文件中定义代码突出显示样式规则，然后将该文件包含在默认布局的html头中。

定义CSS代码 - 高位规则

确保主CSS文件（位于/assets/css，通常名为main.scss或style.scss）具有一些代码突出显示定义的CSS规则，在那里明确定义，或者导入包含CSS规则的文件（scss，sass或更少）。

为了快速检查，我在这个repo

clone sass-code-highlight repo
将sass-code-highlight文件夹放在sass目录中（默认情况下为：_sass）
将代码突出显示到主css文件

assets/css/main.scss

添加以下内容：

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

包括HTML HEAD中的Main 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>

注意：确保css path有效。

Answer 2

当您使用 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 3

您也可以将代码包装起来 {％highlight javascript％} ... {％endhighlight％}阻止。

Answer 4

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

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

~~~

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

4 个答案:

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

2。代码突出显示样式：

定义CSS代码 - 高位规则

包括HTML HEAD中的Main CSS