ブログ

プリズマティック | Jeff Starr
プリズマティック

プリズマティック | Jeff Starr

説明

唯一の3-in-1構文ハイライト！

Prism.js、Highlight.js、またはプレーンコードエスケープを使用して美しいコードスニペットを表示します。

  • Prism.js -コード使用してエスケープ+シンタックスハイライトPrism.jsを
  • Highlight.js –Highlight.jsを使用したコードエスケープ+構文ハイライト
  • プレーンフレーバー–構文ハイライトなしのコードエスケープ

Highlight.jsを使用してデモ投稿を確認してください。また、WP-Mixでこのプラグインをすべてのコードスニペットに使用しています。

Prism.jsの機能

  • 50以上のコーディング言語をサポート
  • 利用可能な8つのPrismテーマすべてから選択してください
  • コードスニペットを追加するためのGutenbergブロックを提供します
  • コードスニペットを追加するためのTinyMCE / Visualボタンを提供します
  • Prismプラグインの行番号を有効にするオプション
  • Prismプラグインのラインハイライトを有効にするオプション
  • Prismプラグインの言語表示を有効にするオプション
  • Prismプラグインのコードコピーボタンを有効にするオプション
  • Prismプラグインのコマンドラインを有効にするオプション
  • 投稿コンテンツ、抜粋、コメントのコードを強調表示します
  • プレフィックスlanguage-とlang-クラスプレフィックスを検出します
  • 構文の強調表示を投稿とページに制限する
  • 単一行および複数行のコードを強調表示する
  • コードエスケープのきめ細かい制御
  • CSSおよびJSアセットのスマートローディング
  • 単一投稿ビューでのACFのサポート

Highlight.jsの機能

  • 50以上のコーディング言語をサポート
  • 利用可能な98のハイライトテーマすべてから選択
  • コードスニペットを追加するためのGutenbergブロックを提供します
  • コードスニペットを追加するためのTinyMCE / Visualボタンを提供します
  • Highlight.js initJavaScriptをカスタマイズする
  • 投稿コンテンツ、抜粋、コメントのコードを強調表示します
  • 構文の強調表示を投稿とページに制限する
  • コードの複数行のブロックを強調表示する
  • プレフィックスlanguage-とlang-クラスプレフィックスを検出します
  • プレフィックスなしのクラス名のサポートを有効にする
  • コードエスケープのきめ細かい制御
  • CSSおよびJSアセットのスマートローディング

プレーンフレーバーの特徴

  • 投稿コンテンツ、抜粋、コメントのコードエスケープを有効にする
  • フロントエンド、管理領域、またはその両方でコードエスケープを有効にする
  • コードスニペットを追加するためのGutenbergブロックを提供します
  • コードスニペットを追加するためのTinyMCE / Visualボタンを提供します
  • 単一行および複数行のコードスニペットをエスケープします
  • <code>タグをエスケープします（構成に基づく）

一般的な機能

  • セットアップと使用が簡単
  • WordPressAPIで構築
  • シンプルさから生まれ、飾り気のない
  • きしむようなクリーンでエラーのないコード
  • 軽量、高速、柔軟
  • パフォーマンスとセキュリティに重点を置いています
  • 必要な場合にのみCSS / JSアセットをロードします
  • HTMLコーディングのベストプラクティスに準拠
  • グーテンベルクブロックエディターで動作します
  • 定期的に更新され、「将来の証拠」

Prismaticは、コードをクリーンに保つために必要なものだけをエスケープします。

詳細については、スクリーンショットを確認してください。

プライバシー

このプラグインは、ユーザーデータを収集または保存しません。Cookieを設定せず、サードパーティの場所に接続しません。したがって、このプラグインはユーザーのプライバシーにまったく影響を与えません。

このプラグインの開発をサポートする

私はWordPressコミュニティを愛して、この無料のプラグインを開発および保守しています。サポートを示すために、寄付をするか、私の本の1つを購入することができます。

および/または私のプレミアムWordPressプラグインの1つを購入します：

  • BBQ Pro –超高速のWordPressファイアウォール
  • Blackhole Pro –不良ボットを自動的にブロックします
  • Banhammer Pro –トラフィックを監視し、悪者を禁止します
  • GA Google Analytics Pro –WordPressをGoogleAnalyticsに接続します
  • USP Pro –無制限のフロントエンドフォーム

リンク、ツイート、いいねもありがたいです。ありがとうございました！🙂

インストール

Prismaticのインストール

  1. データベースのバックアップを作成します
  2. プラグインをブログにアップロードしてアクティブ化します
  3. プラグイン設定にアクセスしてオプションを構成します

WPプラグインのインストールに関する詳細情報

クイックスタートガイド

Prismaticを使い始めるためのクイックガイドは次のとおりです。

  1. プラグインをアクティブにして、Prismatic設定ページにアクセスします
  2. 構文の強調表示には、Prism.jsまたはHighlight.jsを選択します
  3. オプションで、Prism.jsまたはHighlight.jsタブにアクセスして、オプションをカスタマイズします

これで準備が整いました。WP投稿またはページにコードスニペットを追加するには：

  • Gutenberg Block Editorを使用している場合は、Prismaticブロックをクリックします
  • Classic Editorを使用している場合は、PrismaticTinyMCEボタンをクリックします

より良いアイデアを得るには、Prismaticホームページのスクリーンショットをご覧ください。

Prismaticブロックまたはボタンを使用すると、コードスニペットを簡単に追加して言語を選択できます。プラグインは自動的に正しいマークアップを出力して、構文が強調表示されたコードを表示します。コード編集は必要ありません！注：このページのさらに下にある高度な使用法情報。

プラグインが好きですか？

Prismaticが気に入った場合は、5つ星の評価を付けてください。これは、開発とサポートを強力に維持するのに役立ちます。ありがとうございました！

アンインストール

Prismaticはそれ自体の後でクリーンアップします。プラグインがプラグイン画面からアンインストールされると、すべてのプラグイン設定がデータベースから削除されます。プラグインをアンインストールしても、投稿コンテンツには影響しないことに注意してください。プラグインがプラグイン画面からアンインストールされると、プラグインオプションのみが削除されます。

デフォルトオプションに戻す

デフォルトのプラグインオプションを復元するには、プラグインをアンインストール/再インストールするか、Prismatic General Settings> Restore default pluginoptionsにアクセスします。

使用法：構文の強調表示

Prismaticプラグインは、Prism.jsおよびHighlight.jsで使用されるのと同じ規則に従います。基本的な手順は次のとおりです。

  1. Prismatic General Settingsにアクセスして、ライブラリを選択します
  2. 選択したライブラリの[設定]タブにアクセスします
  3. テーマを選択し、オプションを構成します

設定を構成したら、次のいずれかを実行して、コードスニペットの構文の強調表示を有効にできます。

  • 複数行のコードをpreタグとcodeタグでラップします：<pre> <code>…</ code> </ pre>
  • 1行のコードをコードタグでラップします：<code>…</ code>

プラグインは、PrismaticGutenbergブロックとTinyMCEボタンも提供します。そのため、数回クリックするだけでコードスニペットを簡単に追加できます。

注： Prism.jsは、複数行と単一行の両方のコードスニペットを強調表示します。Highlight.jsは、複数行のコードスニペットのみをサポートします。

代わりに適切なマークアップを使用すると、クラスを追加して、特定の言語を示すことができますlanguage-abcかlang-abc（「ABC」は言語識別子である）の<code>タグに。たとえば、1行のコードスニペットの言語としてPHPを示すには、次のようにします。

<code class="language-php"><?php echo 'Hello world'; ?></code>

同様に、複数行のコードスニペットの言語としてHTMLを示すには、次のようにします。

<pre><code class="language-html">
    <table>
        <tr>
            <th>Name</th>
            <th>Side</th>
            <th>Role</th>
        <tr>
            <td>Darth</td>
            <td>Dark</td>
            <td>Sith</td>
        </tr>
    </table>
</code></pre>

または、言語クラスを<pre>タグに配置することもできます。次に例を示します。

<pre class="language-html"><code class="optional">
    <table>
        <tr>
            <th>Name</th>
            <th>Side</th>
            <th>Role</th>
        <tr>
            <td>Darth</td>
            <td>Dark</td>
            <td>Sith</td>
        </tr>
    </table>
</code></pre>

注：前の例でclass="optional"は、コードタグに追加されたものは無視してください。これは、マークダウンがこのWebページのコード例を操作するのを防ぐために使用されます。

基本的に、クラス名のプレフィックス（つまり、「lang-」または「language-」）は、Prism.jsとHighlight.jsで同じです。違いは、各言語を指定するために使用される言語識別子（たとえば、「css」または「html」）です。詳細については、次の「Prism.jsについて」および「Highlight.jsについて」のセクションを確認してください。

注：language- andlang-プレフィックスの検出に加えて、Highlight.jsは、指定されていない言語の自動検出も試みます。プラスオプションとして、あなたは、Highlight.js設定を有効にどんなことなく、言語識別子の使用を可能にするために、「無プレフィックスクラス名をサポートしていない」ことができますlanguage-またはlang-接頭辞。

上級者向けのヒント：言語クラス名は、Prism.jsとHighlight.jsの両方の<pre>タグに追加すると機能します。

使用法：コードエスケープ

Prism.jsやHighlight.jsと同様に、PrismaticプラグインはHTMLコーディング標準に従います。コードエスケープを有効にするには：

  1. Prismatic General Settingsにアクセスして、ライブラリを選択します
  2. 選択したライブラリの[設定]タブから「コードエスケープ」を有効にします
  3. 次のいずれかを実行します。
    • 複数行のコードをpreタグとcodeタグでラップします：<pre> <code>…</ code> </ pre>
    • 1行のコードをコードタグでラップします：<code>…</ code>

たとえば、次のマークアップの例のいずれかに含まれているコードスニペットはエスケープされます（コードのエスケープにはclass属性は必要ないことに注意してください）。

これは1行の例です。

<code class="language-php"><?php echo 'Hello world'; ?></code>

これは複数行のコード例です。

<pre><code class="language-html">
    <table>
        <tr>
            <th>Name</th>
            <th>Side</th>
            <th>Role</th>
        <tr>
            <td>Darth</td>
            <td>Dark</td>
            <td>Sith</td>
        </tr>
    </table>
</code></pre>

では、「コードエスケープ」オプションが有効になっていると、正確にはどうなりますか？各セクション（投稿コンテンツ、抜粋、コメント）に適用される要約は次のとおりです。

  • フロントエンドのみ–コードスニペットは実行時にエスケープされます（データベースのコンテンツに変更は加えられません）
  • 管理エリアのみ–管理エリアから表示すると、コードスニペットはエスケープされます（[更新]または[公開]ボタンをクリックすると、変更がデータベースに保存されます）
  • フロントエンドと管理エリア–前の両方が適用されます
  • なし–すべてのコードエスケープが無効になっています

各ライブラリ（Prism.js、Highlight.js、Plain Flavour）には、独自のコードエスケープ設定が備わっていることに注意してください。したがって、適用されるコードエスケープ設定は、現在アクティブなライブラリによって異なります。プラグインの一般設定にアクセスして、ライブラリを選択します。次に、そのライブラリのタブにアクセスして、コードエスケープ設定を構成します。

フロントエンドまたは管理領域のいずれかまたは両方でコードエスケープが有効になっている場合、プラグインは<code> </ code>タグ内に含まれるすべてのコードに次の変更を加えます。

&                     replaced with &amp;
<                     replaced with &lt;
>                     replaced with &gt;
"                     replaced with &quot;
'                     replaced with '
\r                    removed
trailing whitespace   removed

これらはコードに加えられた唯一の変更であり、他の変更は行われません。

前述のように、フロントエンドと管理領域でのコードエスケープの違いは、フロントエンドでは、上記の変更が実行時に行われ、データベースに保存されないことです。一方、管理エリアでは、コードをコンテンツエディターで表示すると変更が加えられ、ユーザーが[更新]または[公開]ボタンをクリックすると、変更がデータベースに保存されます。コードエスケープ設定を選択するときは、このことに注意してください。

重要！説明したように、管理領域でコードエスケープを有効にすると、エスケープされたコードがデータベースに保存される可能性があります。これはほとんどの場合問題ありませんが、エスケープは実行時にのみ発生する必要がある場合があります。その場合、または不明な場合は、「コードエスケープ」設定で「フロントエンドのみ」オプションを選択してください。「フロントエンドのみ」オプションは、フロントエンドに表示されたときにのみコードを変更し、データベースへの変更を保存しません。

使用法：Gutenbergブロックエディター

グーテンベルクを使用してコードブロックを強調表示するには：

  1. Prismaticブロックを選択します
  2. コード言語を選択します（サイドバーオプションを使用）
  3. コードを追加して完了です。

使用法：クラシックTinyMCEエディター

TinyMCE / Visual / Rich-Text Editorを使用してコードを強調表示するには：

  1. Prismaticボタンをクリックします（のように見えます<>）
  2. コード言語を選択する
  3. コードを追加して「OK」ボタンをクリックします

プレーンテキストエディタを使用している場合は、Prismatic Quicktagボタン（「pre」）もあります。

使用法：Prism.jsプラグイン

現在、PrismaticプラグインはPrism.js用に4つのプラグインを提供しています。

これらのプラグインのいずれか/すべては、Prism.js設定で有効にできます。使用法とオプションの詳細については、上記のリストのプラグインリンクにアクセスしてください。

Prism.jsについて

Prismaticプラグインで使用されるPrism.jsバージョン：1.23.0

Prism.jsリソース

ライセンスと情報

/*
    Prism: Lightweight, robust, elegant syntax highlighting
    MIT license https://www.opensource.org/licenses/mit-license.php/
    @author Lea Verou https://lea.verou.me
*/

サポートされている言語

Language       Class

Apache         = apacheconf
AppleScript    = applescript
Arduino        = arduino
Bash           = bash
Batch          = batch
C              = c
C#             = csharp
C++            = cpp
C-like         = clike
CoffeeScript   = coffeescript
CSS            = css
D              = d
Dart           = dart
Diff           = diff
Elixir         = elixir
G-code         = gcode
Git            = git
Go             = go
GraphQL        = graphql
Groovy         = groovy
HCL            = hcl
HTML/XML/Etc.  = markup, html, xml, svg, mathml, ssml, atom, rss
HTTP           = http
Ini            = ini
Java           = java
JavaScript     = javascript
JSON           = json
JSX            = jsx
Kotlin         = kotlin
LaTeX          = latex
Liquid         = liquid
Lua            = lua
Makefile       = makefile
Markdown       = markdown
Markup         = markup
NGINX          = nginx
Objective-C    = objectivec
Pascal         = pascal
Perl           = perl
PHP            = php
PowerQuery     = powerquery, pq, mscript
PowerShell     = powershell
Python         = python
R              = r
Ruby           = ruby
Rust           = rust
SASS           = sass
Scala          = scala
SCSS           = scss
Shell Session  = shell-session
Solidity       = solidity
Splunk SPL     = splunk-spl
SQL            = sql
Swift          = swift
TSX            = tsx
Twig           = twig
TypeScript     = typescript
Visual Basic   = visual-basic
YAML           = yaml

したがって、たとえば、コードブロックをC ++として指定するには、次のように記述します。

Single line: <code class="language-cpp">...</code>

Multi-line: <pre><code class="language-cpp">...</code></pre>

Alternate: <pre class="language-cpp"><code class="optional">...</code></pre>

注：前の例でclass="optional"は、コードタグに追加されたものを無視します（「代替」構文の場合）。これは、マークダウンがこのWebページのコード例を操作するのを防ぐために使用されます。

スニペットのPrism.js構文の強調表示を無効にするには、言語クラスを省略します。または、Prism.jsスタイルシートをロードしながら、コードスニペットの構文の強調表示を無効にするには、次のようなクラスを追加language-noneします。

<code class="language-none">...</code>

私はもっ​​と多くの言語を追加してうれしいです、提案をしてください

Highlight.jsについて

Prismaticプラグインで使用されるHighlight.jsバージョン：10.5.0

Highlight.jsリソース

ライセンスと情報

/*
    Syntax highlighting with language autodetection.
    Copyright (c) 2006, Ivan Sagalaev https://highlightjs.org/
    All rights reserved. BSD3 License @ https://git.io/hljslicense
*/

サポートされている言語

Language       Class

Apache         = apache, apacheconf
AppleScript    = applescript, osascript
Arduino        = arduino
Bash           = bash, sh, zsh
C              = c, h
C#             = cs, csharp
C++            = cpp, c, cc, h, c++, h++, hpp
CSS            = css
CoffeeScript   = coffeescript, coffee, cson, iced
D              = d
Dart           = dart
Diff           = diff, patch
Elixir         = elixir
G-code         = gcode, nc
GML            = gml
Go             = go, golang
Groovy         = groovy
HTML/XML/Etc.  = xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist
HTTP           = http, https
Ini/TOML       = ini, toml
JSON           = json
Java           = java, jsp
JavaScript     = javascript, js, jsx
Kotlin         = kotlin
Less           = less
Lua            = lua
Makefile       = makefile, mk, mak
Markdown       = markdown, md, mkdown, mkd
Nginx          = nginx, nginxconf
Objective-C    = objectivec, mm, objc, obj-c
PHP            = php, php3, php4, php5, php6
Perl           = perl, pl, pm
Plaintext      = plaintext, txt, text
PowerShell     = powershell, ps
Properties     = properties
Python         = python, py, gyp
Python REPL    = python-repl, pycon
R              = r
Ruby           = ruby, rb, gemspec, podspec, thor, irb
Rust           = rust
Scala          = scala
SCSS           = scss
Shell Session  = shell
SQL            = sql
Swift          = swift
TypeScript     = typescript, ts
VB.Net         = vbnet, vb
YAML           = yaml

したがって、たとえば、コードブロックをC ++として指定するには、次のように記述します。

Single line: <code class="language-cpp">...</code>

Multi-line: <pre><code class="language-cpp">...</code></pre>

Alternate: <pre class="language-cpp"><code class="optional">...</code></pre>

注：前の例でclass="optional"は、コードタグに追加されたものを無視します（「代替」構文の場合）。これは、マークダウンがこのWebページのコード例を操作するのを防ぐために使用されます。

コードブロックのHighlight.js構文の強調表示を無効にするにはnohighlight、次のようにのクラスを追加します。

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

同様に、のクラスを追加して、plaintext任意のテキストをコードのように見せることができますが、強調表示はしません。

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

私はもっ​​と多くの言語を追加してうれしいです、提案をしてください

プラグインの作者

Jeff Starr

プラグインの公式ウェブサイトアドレス

https://wordpress.org/plugins/prismatic/
プリズマティックプラグインの使用で問題が発生した場合は、以下にコメントしてください。問題の解決に最善を尽くします

関連記事:

  1. インラインGoogleスプレッドシートビューア | Meitar Moscovitz
  2. 美しい分類フィルター | Jonathan de Jong
  3. TimeZoneCalculator | Dr. Bernhard Riedl
  4. 検索と並べ替えを含む投稿テーブル | Barn2 Plugins
  5. 管理ページフレームワーク| マイケル・ウノ
  6. ヘッドメタデータ | Jeff Starr
タグ:

コメントを残す