web-dev-qa-db-ja.com

blogger / blogspotでprettifyを使用する方法は？

私はblogger.comを使用してプログラミングに関するいくつかのテキストをホストしていますが、prettify（stackoverflowと同じ）を使用してコードサンプルを適切に色付けしたいと思います。

Prettifyスクリプトをブログドメインにインストールするにはどうすればよいですか？
どこかで共有コピーにリンクする方が（実際に可能であれば）より良いでしょうか？
別のドメインにウェブスペースがあります。それは役に立ちますか？

どうもありがとう。

javascriptshared-hostingbloggerblogspotprettify
56
billpg

Bloggerで新しいエントリを作成すると、エントリでHTMLを使用したり、ブログエントリを編集したりするオプションが表示されます。

http://blogger.com と入力し、ログインしてから、[投稿]> [投稿の編集]> [編集]と入力し、これを上部に配置します。

<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(function() {
    prettyPrint();
});
</script>
<style type="text/css">
/* Pretty printing styles. Used with prettify.js. */

.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }

@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
}
</style>

prettyPrintを直接イベントハンドラーとして使用しないでください。混乱します（詳細については、 readme を参照してください）。そのため、addLoadEventを渡す関数を渡します。この関数は、向きを変えてprettyPrintを呼び出します。

この場合、ブロガーではスタイルシートへのリンクが許可されていないため、prettify.cssのコンテンツを埋め込むだけです。

次に、クラス名が<code></code>の<pre></pre>タグまたは"prettyprint"タグを追加します。この"prettyprint lang-html"のように言語を指定することもできます。

こんな感じになります

<pre class="prettyprint lang-html">
<!-- your code here-->
</pre>

またはこのように

<code class="prettyprint lang-html">
<!-- your code here-->
</code>

入力するコードでは、HTMLを<および>から削除する必要があります。これを行うには、コードをここに貼り付けるだけです。 http://www.simplebits.com/cgi-bin/simplecode.pl

必要に応じて、デフォルトですべてのページに含まれるように、HTMLレイアウトにトップコードを配置できます。

updateこれで、ブロガーでCSSファイルをリンクできるようになったので、これを<head>に追加するだけで十分です。

<link href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function() {
        prettyPrint();
    });
</script>

意図的にbodyonloadイベントを置き換えないことを選択しました。代わりに、古いブラウザーがサポートしていない新しいDOMContentLoadedイベントを使用しています。古いブラウザーのサポートが必要な場合は、他のloadイベントを使用してprettyPrintを開始できます。 jQuery：

jQuery(function($){
    prettyPrint();
});

またはおそらく 最小のdomready これまで

そしてあなたの完了:)

編集：

Lim H コメントで指摘されているように、ブロガーの動的ビュー（ajaxテンプレート）を使用する場合は、ここで説明するメソッドを使用してカスタムJavaScriptをバインドする必要があります。 prettyPrint（）ページの読み込み時に呼び出されません

更新2017-06-04

こちらのガイドを使用してください https://github.com/google/code-prettify

基本的にはこれを使用してください:)

<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<pre class="prettyprint"><code class="language-css">...</code></pre>
60
Timo Huovinen

以下はすぐに私のために働いた。

  • Blogger>レイアウト> HTMLの編集に移動します
  • 次のスニペットをコピーして、[テンプレートの編集]フィールドの_<head>_の直後に貼り付けます。

スニペット：

_<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>
_
  • _</head>_の後、_<body>_を<body onload='prettyPrint()'>に置き換えます
  • 「テンプレートを保存」をクリックします
  • Blogger>投稿>新しい投稿に移動します
  • [HTMLの編集]をクリックして、HTMLを編集していることを確認してください。空のフィールドで試してください：

<pre class="prettyprint">int foo=0; NSLog(@"%i", foo); </pre>

  • [プレビュー]をクリックすると、このコードが黒でのみ表示されることに注意してください。 （まだ）心配しないでください。
  • 「PUBLISHPOST」、「VIEWBLOG」の順にクリックします。あなたのコードはきれいにされるべきです。
41
SK9

現在、Google-Code-Prettifyにはオートローダースクリプトがあります。 1つのURLを介してprettify用のJavaScriptとCSSをロードできます。

スクリプトをBloggerテンプレートの<head>セクションに追加すると、すべての投稿で機能します。

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

詳細はこちら： http://code.google.com/p/google-code-prettify/wiki/GettingStarted

15
Badaro

ブロガーにグーグルコードプリティファイアを追加するのはとても簡単です。

タグの直前に、以下のjavascriptライブラリをブロガーに含めてください。

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

下の写真のように...

enter image description here

これで、ブロガーにgoogle codeprettifierが正常に追加されました。

ブロガーの投稿にコードを挿入する場合は、コード（html、css、phpなど）を追加してから、そのコードを....タグの間に挿入します。

 <pre class="prettyprint">...</pre>

または

<code class="prettyprint">...</code>

BloggerでのGoogle Prettifyのデモ

また、次のリンクでこのGoogle prettifierをブロガーに追加するには、このドキュメントを参照してください。

Google Prettifyを使用してBloggerのシンタックスハイライトを追加する方法

6
muni

SyntaxHightlighterを http://alexgorbatchev.com/wiki/SyntaxHighlighter でご覧ください。そのサイトでは、blogger.comで使用方法の説明もあり、サイトではホストバージョンの必要なスクリプトなので、自分でファイルをホストする必要はありません。

3
Jeroen-bart Engelen

もう1つの解決策は、 syntaxhighlighter 2.0 Javaスクリプトライブラリを使用することです。ブログで使用しましたが、非常にうまく機能しているようです。

これについての投稿は次のとおりです。

http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.htmlリンクテキスト

乾杯。

2
CraftyFella

あなたの質問に対する直接の答えではありませんが、検討する価値があります GitHub 。無料のアカウントを取得して、色付きの構文を取得できます "gists" これを共有してWebページでホストできます。

欠点は、コピーがGithubのサイトでホストされていることです。それがダウンしている場合は、あなたにとってもダウンしています。

1
Jeff Foster

ライブラリを提供するcdnjs "SyntaxHighlighter"

blogger >> template >> edit templateにアクセスしましたbodyテンプレートにタグを付けて保存します。
Pythonの例を示しました。
cdnjsから他の言語のスクリプトファイルをリンクできます。 構文ハイライトコード

<pre class="brush: py">
    print("hello world")
</pre>

他の言語の場合は、スクリプトをコピーしてください： https://cdnjs.com/libraries/SyntaxHighlighter

enter image description here

<!-- syntax highlighter-->
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js'/>
<!-- for python -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js'/>
<!-- include other languages like javascript, php -->
<script language='javascript'> 
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all(); 
</script>
1
Anjaneyulu Batta

ブロガーのテーマセクションに移動し、[HTMLの編集]をクリックします。次に、GooglePrettifyCDNをHTMLのheadタグに追加します。

https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>

次に、このスクリプトの下にコードスニペットのテーマを含めます。Desertテーマを含めました。

<!--Desert theme-->
<style type='text/css'>pre .atn,pre .kwd,pre .tag{font-weight:700}pre.prettyprint{display:block;background-color:#333}pre .nocode{background-color:none;color:#000}pre .str{color:#ffa0a0}pre .kwd{color:Khaki}pre .com{color:#87ceeb}pre .typ{color:#98fb98}pre .lit{color:#cd5c5c}pre .pln,pre .pun{color:#fff}pre .tag{color:Khaki}pre .atn{color:#bdb76b}pre .atv{color:#ffa0a0}pre .dec{color:#98fb98}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{pre.prettyprint{background-color:none}code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style>

その他のテーマについては、こちらをご覧ください。 テーマを美しくする

投稿を作成するときは、編集モードをビジュアルから[〜＃〜] html [〜＃〜]に変更して、現在の場所に移動しますコードスニペットを追加します。次に、このようなコードを含めます。

<pre class="prettyprint">
  <code class="language-html">
      <!-- your code snippet -->
  </code>
</pre>

関連する言語html、css、php、javascriptを選択することで、コードスタイルを変更できます...ここでは、htmlコードスニペットを使用しました。

0
user7090620

ここ は私のために働く解決策です。動的ブロガーHTMLの<head>...</head>を入力します。

<script>
$(window.blogger.ui()).on('viewitem', function (event, post, element) {
    prettyPrint();
});
</script>
0
Artru