用 Markdown 写 html 标签？答案

【问题标题】：Write html tag with Markdown?用 Markdown 写 html 标签？
【发布时间】：2012-09-20 03:22:02
【问题描述】：

在 tumblr 中，支持降价。我尝试在我的 tumblr 中添加语法高亮(highlight.js)，但遇到了一些问题。

highlight.js 需要在 HTML 代码标签中添加一个 class 属性。

我尝试在我的 tumblr 上写一篇这样的文章：

<pre class="test">
    <code class="html">
        function A(){ return "hello world"; }
    </code>
</pre>

实际页面中的结果：

<pre>
    <code>
        function A(){ return "hello world"; }
    </code>
</pre>

class属性不见了…… 是否可以在 Markdown 中添加 HTML 属性？

【问题讨论】：

标签： html syntax-highlighting markdown tumblr

【解决方案1】：

如果你使用google-code-prettify，你可以这样做（我目前正在这样做）：

$(document).ready(function() {
    $('pre').addClass('prettyprint');
    prettyPrint();
});

基本上，你加载所有文件：

prettify.css
sunburst.css // optional styles
prettify.js

在上面添加代码sn-p，调用prettyPrintonLoad:onload="prettyPrint()"。

上面的代码 sn-p 应该放在所有文件之前。它找到所有pre 元素，并将prettyprint 类附加到它，以便脚本知道对其进行样式设置。

但是，如果您想使用当前的语法荧光笔，您可以执行以下操作（使用 jQuery）：

$(document).ready(function() {
    $('pre').addClass('test');
    $('code').addClass('html');
    // code to intialize highlight.js
});

【讨论】：

如果onload="prettyPrint()"已经添加到<body>中，prettyPrint()在ready()的参数中就不需要了。

【解决方案2】：

我刚试过，不难。

http://softwaremaniacs.org/soft/highlight/en/description/ 在第一个代码 sn-p 中描述了您需要插入 tumblr 页面的 html 以使其工作的内容。 在预览模式下，代码 sn-p 不会加载并突出显示。

为了能够使用荧光笔，您需要能够链接样式表和 javascript。如果您没有托管，那么 highlight.js 的人会免费提供托管解决方案。

在<head>...</head> 标签中添加这 3 行

<link rel="stylesheet" href="http://yandex.st/highlightjs/7.2/styles/default.min.css">
<script src="http://yandex.st/highlightjs/7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

我在 tumblr 上的代码帖子中添加的只是

<pre><code class="language-python">
...your code here...
</code></pre>

【讨论】：