Question

在Jekyll（2.5.3）应用程序上，我想为样式注入一些HTML，但我很难这样做。

这是我的代码

_config.yml

$SECFields = array(
                        'token' => '',                              
                        'maxamt' => '6.98',                      
                        'returnurl' => 'https://musiculus.com/frontend/payment_plus',           
                        'cancelurl' => 'https://musiculus.com/frontend/membership',                 
                        'callback' => '',                           
                        'callbacktimeout' => '',                    
                        'callbackversion' => '61.0',                
                        'reqconfirmshipping' => '0',                
                        'noshipping' => '1',                        
                        'allownote' => '0',                         
                        'addroverride' => '1',                      
                        'localecode' => '',                         
                        'pagestyle' => '',                          
                        'hdrimg' => '',                             
                        'hdrbordercolor' => '',                      
                        'hdrbackcolor' => '',                       
                        'payflowcolor' => '',                       
                        'skipdetails' => '',                        
                        'email' => '',                              
                        'solutiontype' => '',                       
                        'landingpage' => '',                        
                        'channeltype' => '',                        
                        'giropaysuccessurl' => '',                  
                        'giropaycancelurl' => '',                   
                        'banktxnpendingurl' => '',              
                        'brandname' => '',                            
                        'customerservicenumber' => '',              
                        'giftmessageenable' => '',                  
                        'giftreceiptenable' => '',                  
                        'giftwrapenable' => '',                     
                        'giftwrapname' => '',                       
                        'giftwrapamount' => '',                     
                        'buyeremailoptionenable' => '',             
                        'surveyquestion' => 'Are you listing?',     
                        'surveyenable' => '',                       
                        'totaltype' => '',                          
                        'notetobuyer' => '',                                            
                        'buyerid' => '',                            
                        'buyerusername' => '',                      
                        'buyerregistrationdate' => '',              
                        'allowpushfunding' => ''                    
                    );

page.md

...
markdown: kramdown
highlighter: rouge
...

但是，一旦建成，就会产生以下内容

[Google](https://google.com/) <div class="info">new</div>

HTML不会被解析，而只是呈现为文本。

经过一些谷歌搜索，我试过

Google <div class="info">new</div>

端

<div class="info" markdown="1">new</div>

但结果总是一样。

我在这里遗漏了什么吗？

感谢。

Answer 1

关于原始HTML的rules状态（强调添加）：

唯一的限制是块级HTML元素 - 例如<div>，<table>，<pre>，<p>等 - 必须通过空行与周围内容分开，并且块的开始和结束标记应该不得使用制表符或空格缩进。 Markdown非常聪明，不会在HTML块级标记周围添加额外的（不需要的）<p>标记。

因此，您需要这样做：

[Google](https://google.com/)

<div class="info">new</div>

当然，如果您确实希望两者都在同一行（或至少在同一段落中），那么您需要使用内联HTML标记。正如规则所述（强调增加）：

跨度级HTML标记 - 例如Markdown段落，列表项或标题中的<span>，<cite>或<del> - 可以在任何地方使用。如果需要，您甚至可以使用HTML标签而不是Markdown格式;例如如果您希望使用HTML <a>或<img>代码而不是Markdown的链接或图片语法，请直接进行。

与块级HTML标记不同，Markdown语法在span-level标记内处理。

因此，您可以这样做：

[Google](https://google.com/) <span class="info">new</span>

当您使用Kramdown时，您可能还会发现Kramdown的syntax documentation对原始HTML有帮助。 Kramdown还包括对非标准Attribute Lists功能的支持，该功能允许您在不使用Markdown中的原始HTML的情况下为生成的HTML分配属性。但是，属性只能分配给可以在Markdown中表示的元素。由于Markdown没有任何方式可以原生代表div或span，你将无法使用它们。但是，您可以将您的班级分配给段落：

[Google](https://google.com/)

new
{: .info }

以上将生成以下HTML：

<p><a href="https://google.com/">Google</a></p>
<p class="info">new</p>

请注意，info类已分配给第二个<p>。

或者，您可以将类分配给内联元素（例如强调）：

[Google](https://google.com/) *new*{: .info }

这导致以下输出：

<p><a href="https://google.com/">Google</a> <em class="info">new</em></p>

当然，除非info类的CSS将其关闭，否则您将使用斜体文本，这可能是也可能不是您想要的。有时，只需在Markdown中直接使用原始HTML就更容易了。

Answer 2

如果您希望它们以内联方式显示，请使用html：

 <a href="https://google.com">Google </a><span class="info">new</div>

如果它们可以分为两行，则使用纯降价：

 [Google](https://google.com/) 

 new
 {: .info}

如何在Jekyll中注入HTML

_config.yml

page.md

2 个答案: