Title: ソース コード ウィジェット プラグイン

SDL, HTML, CSS, JavaScript, PHP, Perl, C++, Bash, VB などのソースコードを、プログラムの文法に応じて色分け表示するウィジェットです。

TeamPage をインストールすると、このプラグインも自動的にインストールされます。特別な場合を除き、このプラグインを個別にダウンロードしてインストールする必要はありません。





表示例



例えば、HTML のソースコードは、このウィジェットを使うと次のように表示されます。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link href="./resources/style.css" rel="stylesheet" type="text/css">
  <title>サンプル HTML ファイル</title>
</head>
<body>
  <div id="page">
    <!-- コメント -->
    <h1 id="title">見出し</h1>
    <p>ここに段落の文章を書きます。</p>
  </div>
</body>
</html>


こちらは JavaScript のサンプルです。

(function() {
  function tryHighlightingAll() {
    try {
      Prism.highlightAll();
    }
    catch (e) {
      console.log(e);
    }
  }
  const eventsToListenFor = [ "load", "auto-refresh-load", "comment-insert", "comment-update", "feed-item-expand" ];
  for (let i = 0; i < eventsToListenFor.length; i ++) {
    Proteus.addHandler(eventsToListenFor[i], tryHighlightingAll);
  }
})();


インストール



下のリンクをクリックして zip ファイルをダウンロードしてください。



ダウンロードした zip ファイルを、サーバーセットアップ > プラグイン ページで指定し、インストールします。

使い方



リッチテキスト エディタの [ウィジェットの挿入/編集] メニューから [ソース コード] を選択します。



[シンタックス] ドロップダウンリストでソースコードの種類(プログラミング言語の種類)を選択し、[ソース コード] 欄にソースコードを記述し、[OK] ボタンをクリックします。



記事の本文にウィジェットが挿入されたことを確認します。



操作を繰り返して複数のウィジェットを挿入することもできます。



記事を投稿すると、下図のようにプログラミング言語に応じて色分け表示されます。色分け表示されない場合は、[F5] キーを押して画面を再読込してください。



設定



サーバーセットアップ > プラグイン ページの「ソース コード ウィジェット」プラグインの [設定] をクリックして設定画面を表示します。



[色テーマ] 設定で色テーマを選択できます。



下図は「Monakai」を選択したときの例です。





Attachments:
img1.png
img2.png
img3.png
img4.png
img5.png
img6.png
img7.png
img8.png
Shared Files for Download785
関連記事
Article: Download785 (permalink)
Categories: :DocJp:プラグイン
Date: 2012/10/26; 18時25分01秒 JST

Author Name: TeamPage サポート
Author ID: jpbo