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

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

jekyll

语法突出显示在Jekyll的MD文件中不起作用？,jekyll,Jekyll,语法highlighter在使用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++) {

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

在使用kramdown时，您需要使用

~~

使其突出显示示例：

在这种情况下：

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

您还可以将代码包装为

{%highlight javascript%}。。。{%endhighlight%}块

受保护的代码块仅适用于

Kramdown:：Kramdown

（使用

~~~

）和

Kramdown:：GFM

（使用

~~~~

或backticks）解析器（）

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

kramdown:
  input: GFM

您的降价文件语法很好，您不需要更改它（查看下面的注释）

要使代码高亮显示正常工作，需要检查两件事：

在

\u config.yml

生成的html文件可以访问CSS高亮显示语法样式规则

1.Highlighter和markdown处理器配置从Jekyll3.0开始，Kramdown作为降价引擎，Rouge作为语法高亮。是，也是唯一受支持的设置

因此，您可以删除它们的相关设置，或在

\u config.yml

中显式设置，如下所示：

# Conversion
markdown:    kramdown
highlighter: rouge

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

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

2.代码突出显示样式：生成的html文件应该可以访问CSS代码突出显示规则，这取决于您使用的主题
一种方法是在主css文件中定义一个突出显示样式规则的代码，然后将该文件包含在默认布局的html头中
定义CSS代码高级化规则确保主CSS文件（位于
/assets/CSS
，通常命名为
main.scss
或
style.scss
）定义了一些代码突出显示CSS规则，可以在其中显式定义，也可以通过导入包含CSS规则的文件（scss、sass或更少）来定义
为了便于快速检查，我在本文中添加了一些突出主题的scss代码

克隆回购

将
sass代码高亮显示
文件夹放在sass目录中（默认情况下：
\u sass
）

将代码高亮显示输入到主css文件

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

@import "sass-code-highlight/monokai"; // 'monokai' as example
在HTML头中包含主CSS 您需要在默认布局中使用sinppet bellow（
\u layouts/default.html
）

注意：确保
css路径
有效。
尝试使用~~~无效。陈冯富珍用另一种方法更新了这个问题。还可以尝试前一种方法，在tile和语言名称之间留一个空格：~~~ javascriptno，这也不起作用。也许我的css文件需要修改？配置是正确的，如果代码是用正确的类highlighter生成的，并且该类存在于css中，则进行调试。将生成类“language javascript”以及“highlighter rouge”。是一个具有相同内容的.md文件，这是它的md文件，配置看起来不错。同样的，问题在于CSS，要么没有正确定义，要么没有加载。如果他们使用
site.baseurl
从那里开始
@import "sass-code-highlight/monokai"; // 'monokai' as example

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

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