4

tumblr では、マークダウンがサポートされています。tumblr にシンタックス ハイライター ( highlight.js )を追加しようとしましたが、問題が発生しました。

highlight.js は、HTML コード タグにclass属性を追加する必要があります。

私は自分のタンブラーで次のような記事を書こうとしています:

<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属性を追加することは可能ですか?

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 に答える