18

私はBloggerにSyntaxHighlighter3.0.83を数時間インストールしようとしています。多くのチュートリアルを試しましたが、それでも機能しません。つまり、preタグに挿入された通常のテキストと同じように見えます。

新しいブログを作成して貼り付けました。

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css'     rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js'     type='text/javascript'></script>
<script language="javascript" type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

...ヘッドタグを閉じる直前。上に貼り付けたコードはここで生成されました：generator

奇妙なことに、それは私自身のhtmlドキュメントで機能します。例として：

<html>
<head>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>
</head>
<body>
<pre class='brush:java;'>import gt.memorize;
public class Test
{
    private static final String test = "test";
}</pre>
</body>

</html>

ただし、同じpreタグはブロガーでは機能しません。

貼り付けもしてみました

<script language="javascript" type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

ボディの最後に、b：skinタグの最後にスタイルを貼り付けます。どちらも機能しません。そして、私はコードを作成部分に貼り付けません:)私は非常に混乱しているので、どんな助けでも非常にありがたいです。

4

6 に答える 6

20

動的ビューの場合、投稿のコンテンツは、構文の強調表示プロセスをブートストラップするスクリプトの後にロードされるようです。あなたはそれを回避することができます：

<pre class="brush: js" title="test" id="sh3-123">
var f = function () {
    return 1;
};
</pre>

<script type="text/javascript">
// code snippet is loaded here, use SH3 API to highlight it
var element = document.getElementById('sh3-123');
SyntaxHighlighter.highlight(undefined, element);
</script>
于 2012-10-12T08:11:17.517 に答える
11

私も同じ問題を抱えていました。SyntaxHighlighterを設定する手順は簡単に思えました。そして、すべてのチュートリアルは、「私のブログでは機能します。機能しない場合は、何か間違ったことをしているに違いありません」というコメントを含め、ほぼ同等でした。何もうまくいきませんでした。ハイライトもありませんでした。

解決策は、別のBloggerテンプレートに切り替えることでした。選択した動的テンプレートでは機能しませんでした。単純なテンプレートに切り替えるとうまくいきました。ハイライトが機能するようになりました。

ちなみに、エラーを追いかけている間、私は代わりにPrettifyも試しました。それもうまくいきませんでした。動的テンプレートが、両方の構文ハイライターを失敗させる原因となったようです。

于 2012-09-30T20:53:53.820 に答える
4

スニペットをgisthubに投稿し、YouTubeビデオのように埋め込みます（HTML埋め込みコードをコピーします）

ここに画像の説明を入力してください

投稿に貼り付けます）。出来上がり！（画像提供：http：//www.restlessprogrammer.com/2013/02/adding-code-snippets-to-your-blog.html）

于 2014-07-04T16:33:33.540 に答える
3

Stefanの回答と同様に、シンプルテンプレートを使用するブロガーアカウントで機能させることができました。

私はこのようにしました：

1.タグ<link>を配置<script>し、CSSおよびJSファイルをインポートするために<head>

2.次に、蛍光ペンを初期化または呼び出すJSスクリプトを<body>：に配置します。

<script language="javascript">     
            SyntaxHighlighter.config.bloggerMode = true;
            SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
            SyntaxHighlighter.all(); 
</script>

これが私がそれを機能させることができた唯一の方法であり、Stefanが述べた＃2はおそらくブートストラップの問題が原因であるため、本体に配置する必要があります。これを使用してJavascriptを正常に表示する私のブログ投稿は次のとおりです

于 2014-11-26T05:24:46.677 に答える
1

元の質問には答えましたが、構文の強調表示に失敗する別の問題に遭遇しました。誰かがここで解決策について言及することが役立つかもしれないと思いました。

ブロガープレビューはデフォルトでhttps：//で投稿を開くことがわかりました。これにより、すべてのページリンクがhttpsに強制されます。alexgorbatchevのホスティングのスタイルシートを使用すると、スタイルシートの読み込みに失敗するため、強調表示が機能しません。これらのエラーは、開発ツールコンソールに表示されます。

現時点では、カスタムドームでのhttpsサポートがないため、この問題はブロガードームの下のブログでのみ表示されます。また、httpsを使用したパブリックアクセスはデフォルトで無効になっているため、これは主に投稿プレビューの問題であり、簡単に回避できます。ただし、httpsによるパブリックアクセスが有効になっている場合、強調表示は機能しません。

于 2016-03-27T14:22:51.717 に答える
1

あなたがここに着陸した場合、この詳細な答えはおそらくあなたを助けるでしょう： https ：//stackoverflow.com/a/14659603

TL; DR –viewitemイベントを聞く

問題は、Bloggerの「動的ビュー」テーマがページの準備ができた後にブログ記事のコンテンツをロードすることです。幸い、コンテンツの読み込みイベントでコールバックを登録できます。

Bloggerコンソール→→→Theme直前Edit HTMLに</head>、次の行を挿入します。

<script>$(blogger.ui()).on({ viewitem: SyntaxHighlighter.all });</script>

クリックすると、ブログ記事のコンテンツが読み込まれた後Save themeに蛍光ペンが実行されます。

カスタマイズ可能なコールバックによる代替

より柔軟性が必要な場合は、独自の関数を作成してください。

<script>
   const onArticleLoad = (event, post, elem) => {
      const title = $('h1.entry-title').text().trim();
      console.log('Article: %c' + title, 'color: purple;');
      console.log(event, post, elem);
      };
   $(window.blogger.ui()).on({ viewitem: onArticleLoad });
</script>

その後、ブログ記事を表示するたびに、jsコンソールは次のように表示されます。 jsコンソール

于 2019-02-13T04:14:42.663 に答える