ソースコード ウィジェット プラグインをアップデートしました

TeamPage 6.2.67 では、ソースコード ウィジェット プラグインをバージョン 5.0.0 へアップデートし、サポートするプログラム言語を増やすとともに、色テーマも刷新しました。

今回のブログでは、今回のアップデート内容をご紹介します。

ソースコード ウィジェット プラグインとは？

このプラグインは、記事の本文に、プログラムのコードを埋め込んで表示する「ウィジェット」を使えるようにします。

このウィジェットを使って埋め込み表示される内容は、選択されたプログラム言語によって読みやすい形に色分け表示されます。

例えば、入力された内容が HTML ソースならば <h1> や <table> HTML タグが、JavaScript ならば const や function などのキーワードが、他の部分と異なる色で表示され、コードを読みやすくしてくれます。この色分けのことを「ハイライト」と呼びます。

このウィジェットを使用するには、本文の入力欄（リッチテキスト エディター）の「ウィジェットの挿入/編集」メニューの「ソース コード」を選択します。

今回のアップデートについて

私と米国のエンジニアは、TeamPage 上で頻繁にプログラムコードをレビューしたり相談したりしています。このようなとき、TeamPage の記事の中に「ソース コード ウィジェット」を使ってコードを埋め込み表示し、相手がすぐに読めるようにしています。

ここ数年は JavaScript に関してやり取りすることが増えましたが、以前のバージョンで使われていたハイライト用ライブラリはバージョンが古く、const 等の比較的新しいキーワードが色分けされませんでした。

この問題を解決するため、実は数年前に Highlight.js を使った別のプラグインを作ったことがありますが、手動での TeamPage へのインストールが必要でした。

それに対して、今回は、既存の「ソース コード ウィジェット」をアップデートする形での改修を行ったため、別のプラグインのインストールする必要はありません。

使用したライブラリは、MIT ライセンスで許諾されている Prism.js です。多くのプログラム言語に対応していることが決め手となりました。

下図は、上図と同じコードを新しい「ソース コード ウィジェット」で表示した例です。

下図は、人気の色テーマのひとつである「Monakai」で表示した例です。

まとめ

当プラグインは、TeamPage 6.2.67 に含まれており、お使いの TeamPage をバージョン 6.2.67 以降にアップデートすることで使用できるようになります。

それよりも古いバージョンの TeamPage で使用したい場合は、サポートサイトから無料でダウンロードしてご利用いただけます。（サポートサイトへのユーザー登録が必要です）

どうぞお気軽にご利用ください！

今後もお客様へのよりよい機能の提供に努めて参ります。