あなたも好きかも
説明
唯一の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のインストール
- データベースのバックアップを作成します
- プラグインをブログにアップロードしてアクティブ化します
- プラグイン設定にアクセスしてオプションを構成します
クイックスタートガイド
Prismaticを使い始めるためのクイックガイドは次のとおりです。
- プラグインをアクティブにして、Prismatic設定ページにアクセスします
- 構文の強調表示には、Prism.jsまたはHighlight.jsを選択します
- オプションで、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で使用されるのと同じ規則に従います。基本的な手順は次のとおりです。
- Prismatic General Settingsにアクセスして、ライブラリを選択します
- 選択したライブラリの[設定]タブにアクセスします
- テーマを選択し、オプションを構成します
設定を構成したら、次のいずれかを実行して、コードスニペットの構文の強調表示を有効にできます。
- 複数行のコードを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コーディング標準に従います。コードエスケープを有効にするには:
- Prismatic General Settingsにアクセスして、ライブラリを選択します
- 選択したライブラリの[設定]タブから「コードエスケープ」を有効にします
- 次のいずれかを実行します。
- 複数行のコードを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 &
< replaced with <
> replaced with >
" replaced with "
' replaced with '
\r removed
trailing whitespace removed
これらはコードに加えられた唯一の変更であり、他の変更は行われません。
前述のように、フロントエンドと管理領域でのコードエスケープの違いは、フロントエンドでは、上記の変更が実行時に行われ、データベースに保存されないことです。一方、管理エリアでは、コードをコンテンツエディターで表示すると変更が加えられ、ユーザーが[更新]または[公開]ボタンをクリックすると、変更がデータベースに保存されます。コードエスケープ設定を選択するときは、このことに注意してください。
重要!説明したように、管理領域でコードエスケープを有効にすると、エスケープされたコードがデータベースに保存される可能性があります。これはほとんどの場合問題ありませんが、エスケープは実行時にのみ発生する必要がある場合があります。その場合、または不明な場合は、「コードエスケープ」設定で「フロントエンドのみ」オプションを選択してください。「フロントエンドのみ」オプションは、フロントエンドに表示されたときにのみコードを変更し、データベースへの変更を保存しません。
使用法:Gutenbergブロックエディター
グーテンベルクを使用してコードブロックを強調表示するには:
- Prismaticブロックを選択します
- コード言語を選択します(サイドバーオプションを使用)
- コードを追加して完了です。
使用法:クラシックTinyMCEエディター
TinyMCE / Visual / Rich-Text Editorを使用してコードを強調表示するには:
- Prismaticボタンをクリックします(のように見えます
<>
) - コード言語を選択する
- コードを追加して「OK」ボタンをクリックします
プレーンテキストエディタを使用している場合は、Prismatic Quicktagボタン(「pre」)もあります。
使用法:Prism.jsプラグイン
現在、PrismaticプラグインはPrism.js用に4つのプラグインを提供しています。
- 行のハイライト–pre
data-line
要素に属性を追加する必要があります - 行番号–pre
line-numbers
要素に属性を追加する必要があります - 言語の表示–追加の手順は必要ありません
- クリップボードにコピー–追加の手順は必要ありません
これらのプラグインのいずれか/すべては、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>
私はもっと多くの言語を追加してうれしいです、提案をしてください