4

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

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

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

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

实际页面中的结果：

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

类属性没了…… 有没有可能在 Markdown 中添加 HTML 属性？

4

2 回答 2

3

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

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

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

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

添加上面的代码片段，然后调用prettyPrint onLoad: onload="prettyPrint()"。

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

然而，如果你想使用你当前的语法高亮，你可以做这样的事情（使用 jQuery）：

$(document).ready(function() {
    $('pre').addClass('test');
    $('code').addClass('html');
    // code to intialize highlight.js
});
于 2012-09-24T00:32:55.727 回答
1

我刚试过，不难。

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

为了能够使用荧光笔，您需要能够链接样式表和 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>
于 2012-09-23T15:01:44.533 回答