WEMOブロックエディター完全対応のWordPressテーマ「SWELL」をリリースしました!コピペで終わらない、本質的な理解を目指した知識整理のメモをお届け。Block」の使い方を紹介します。クリックだけでコードブロックを簡単に挿入でき、選択した言語に合わせてシンタックスハイライトしてくれます。カラーリングは現在「Light」と「Dark」の2種類。カラーリングの例カラーリングの例このような格好いい表示のコードブロックがめちゃくちゃ簡単に使用できます!シンタックスハイライトの機能自体は「prism.js」を使っています。(より良いカラーリングができるように少しだけ追加処理を加えています。)また、使用できる言語も幅広く、以下の言語が標準でサポートされています。HTMLCSSSCSSJavaScriptTypeScriptPHPRubyPythonSwiftCC#C++Objective-CSQLJSONBashGitこの他の言語も、設定によって使用可能です。現在、公式プラグインリポジトリへの登録申請中ですので、インストールは以下のzipファイルをダウンロードしてお使いください。無事、申請が通りました。シンタックスハイライト機能付きのコードブロックが簡単に挿入できるようになっています。ブロックエディタでコードブロックを使用するWordPress5からの新エディタ、ブロックエディタでの使用方法です。エディタ内で「ブロックの追加ボタン」をクリックし、「一般ブロック」・「フォーマット」・「レイアウト要素」などのカテゴリの中から「フォーマット」を選択してください。Block」というブロックが選択できるようになっています。Block」をクリックすると、次のような「コード入力エリア」・「言語選択ボックス」・「ラインハイライト指定エリア」がセットとなったブロックが追加されます。左下の「言語選択ボックス」からお好きな言語を選択してください。例として「HTML」を選択し、簡単なコードを書いてみます。投稿を一度保存し、記事の表示をみてみましょう。以下のように、コードが綺麗に表示されています。カラーリング設定が「Light」の場合の表示ラインハイライトの使用方法ブロックエディタでは、ラインハイライト機能も簡単に使用できます。先ほどのHTMLコードの2行目をハイライト表示させたい場合、以下のようにコードブロックの右下の入力エリアに「2」を入力します。ハイライト行の入力すると、以下のように、2行目のコードがハイライト表示されます!ラインハイライトの様子(ライトカラー)ラインハイライトの様子(ダークカラー)複数行のハイライト表示ももちろん可能です。ページを参考にしてください。クラシックエディタでコードブロックを使用するエディタ上部のツールバーに「コードブロック」と表示されたセレクトボックスが追加されているかと思います。(2段目が隠れている場合は「ツールバーの切り替えボタン」にて表示させてください。しに「HTML」を選択してみると、以下のようにコードブロックが挿入されます。*/の部分を削除してコードを記述してください。コードをエディタに書いておき、それらを選択した状態でコードブロックを選択することも可能です。選択した状態でセレクトボックスから言語を選択すると、以下のようにコードブロックで選択範囲がラッピングされます。data-line属性を追記してください。ページを参考にしてください。コードブロックから抜け出す方法コードブロック内で通常のエンターキーで改行を重ねてもコードブロックからは抜け出せません。カーソルキーの「→」または「↓」で抜け出してください。Vのペーストを使ってください。右クリックで「ペーストしてスタイルを合わせる」を選択してペーストしてください。複数行に渡るコードをコピペする時、空白行がテキストに含まれているとうまくコードブロック内にペーストされません。codeタグの中へペーストしてください。各種設定についてこのプラグインでの各種設定について簡単に説明しておきます。BLOCK」項目から可能です。機能として、以下のような設定ができます。次に、「基本設定」の下にある「高度な設定」に関する説明をしていきます。「使用する言語設定」項目の内容を編集し、不要な言語の行を削除してください。「使用する言語設定」コードブロックでの言語選択セレクトボックスで表示される言語が上記の設定に合わせて減少します。標準でサポートされている言語以外も使用することもできます。「使用する言語設定」項目にて、prismでのクラス名:"言語の表示名"という形式で言語を追加できます。複数言語を追加する場合は、必ず,区切りで言語設定は増やしてください。ページで確認してください。例:PerlとGoも選択できるようにするhtml:"HTML",css:"CSS",...perl:"Perl",go:"Go",こうすることで、セレクトボックスの言語リストに項目が追加されます。これだけではまだシンタックスハイライトは有効になっていません。読み込むprism.jsファイル(シンタックスハイライトを実行するスクリプト)も変更する必要があります。デフォルトで読み込んでいるprism.jsファイルはこちらのページでダウンロードできるJSファイルです。追加したい言語にチェックを入れ、ページ下部でJSファイルをダウンロードしてください。ダウンロードしたファイル(prism.js)をテーマファイル内にアップロードします。「高度な設定」->「独自prism.js」項目でアップロードしたファイルまでのパスを入力し、設定を保存します。機能が追加されていけばここに更新して行こうと思います。個別のコードブロックごとに「行数表示」の設定が可能になりました初回ベータ版では、全ブロック共通の設定しかできませんでしたが、コードブロックごとに行数の表示をするかどうかを設定できるようになりました。コードブロック個別設定これにより、「1行のコードを記述するときは行数を表示したくない」など、の細かな設定が可能になります。コードブロックに「ファイル名の表示」が可能になりましたコードブロックに「ファイル名」を設定するテキストエリアを追加しています。実際の表示は以下のようになります。preタグに追記してください。コードのフォントファミリーが自由に設定できるようになりましたコードのフォントファミリーを自由に設定できるようにしてほしいとの要望を受け、設定画面にてフォントファミリーを設定できるようにしました。フォントの設定位置HCBのコードブロックをテキストで呼び出せるように、キーワードを追加Gutenbergでは段落の最初に/を入力するとブロックを呼び出すことができます。この時、/に続けてキーワードを入力することで呼び出したいブロックを検索することもでき、HCBコードブロックは/hcbまたは/codeで検索できるようになっています。