本文介绍了语法突出显示在Jekyll的MD文件中不起作用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用kramdown解析器和胭脂色宝石时，语法荧光笔在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

解决方案

您的Markdown文件语法很好，您无需进行更改(请在下面查看我的评论)

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

highlighter 和 markdown处理器
生成的html文件可以访问CSS高亮语法样式规则

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

从jekyll 3.0开始，Kramdown作为Markdown引擎，Rouge作为语法突出显示器.是默认jekyll设置，并且是 github页面.

因此，您可以删除它们的相关设置，或在_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规则，可以在此处明确定义，也可以通过导入文件(scss， sass或更少)包含CSS规则.

为了快速检查，我在此 repo

克隆 sass-code-highlight 回购
将sass目录中的sass-code-highlight文件夹放入(默认情况下:_sass)
将代码突出显示内容导入主css文件

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

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

在HTML HEAD中包含主要CSS

您需要使用默认布局(_layouts/default.html)

中的sinppet波纹管

<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有效.

The syntax highlighter does not seem to be working in Jekyll using the kramdown parser and rouge gem. Quotes also do not show up highlighted and formatted.

Markdown file:

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

My config file listed below.

config.yml:

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

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

解决方案

Your Markdown file syntax is fine, you don't need to change it (check my comment bellow)

To get the code highlighting working, you need to check 2 things:

the highlighter and the markdown processors are correctly configured in _config.yml
the generated html files have access to a CSS highlighting-syntax style rules

1. Highlighter and the markdown processors configuration

As of jekyll 3.0, Kramdown as the Markdown engine, and Rouge as the syntax highlighter. are the default jekyll setting, and the only setting supported by github pages.

So you can remove their related setting, or set it explicitly at _config.yml as follows:

# Conversion
markdown:    kramdown
highlighter: rouge

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

2. Code highlighting style:

the generated html file should have access to a CSS code-highlighting rules, that depends on the theme that you're working with.

One way to do so, is to have a code-highlighting style rules defined in the main css file, then include that file in the html head of the default layout.

define the CSS code-highliting rules

Make sure that the main CSS file, (located at /assets/css, and usually named main.scss or style.scss) has some code highlight CSS rules defined, either explicitly defined there, or by importing a file (scss, sass, or less) that contains the CSS rules.

for a quick check, I've putted some scss code-highlighting themes in this repo

clone sass-code-highlight repo
put sass-code-highlight folder inside the sass directory (by default: _sass)
inport the code-highlight to the main css file

in assets/css/main.scss add the following:

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

include the Main CSS in the HTML HEAD

you need to have the sinppet bellow in the default layout (_layouts/default.html)

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

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

either directly, or by including a head.htmlfile - located at _includes directory - into it, as follows:

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

Note: make sure that the css path is valid.

这篇关于语法突出显示在Jekyll的MD文件中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！