こんにちは
実際にサイトを作って記事を書いていると、「こんな機能欲しい」が無限に出てくるRyoです

さて、Webエンジニアとしてのブログを書いている以上、投稿される記事には「コード」が多く出てくるわけですが、
baserCMSの積み上げ式ブロックエディタであるBurgerEditorには「コードブロック」がデフォルトでは存在しません

現状、コードを書いたらこうなります

$items = ['りんご', 'バナナ', 'ぶどう'];
foreach ($items as $item) {

あぁ、悲しきかな、、、
他のブログでよく見る黒い背景にコードが書いてあるような…あれがやりたい！

ということでやっていきます

とはいえ、オリジナルのブロックってどう作るんだろう…
「BurgerEditor オリジナルブロック」で調べてところ、baserCMS4系対応版の記事はいくつかあるけど、baserCMS5系対応版のものは見当たらず…

仕方がないので4系対応版の記事を参考に作成してみよう

参考記事
[baserCMS4]噂のBurgerEditor（有料版）に自作プラグインのブロックを追加してみる
baserCMS BurgerEditorプラグインのオリジナルブロックを再帰的に利用する方法

baserCMS5でBurgerEditorのカスタムブロックを作成したい人へ…
この記事が唯一の希望です…
（2025/08/27 19:14 現在）

baserCMS4系とbaserCMS5系では、フォルダの構成が大きく変わります
理由としてbaserCMS4系はcakePHP2系を利用していたのに対し、baserCMS5系ではcakePHP5系を利用していることが大きいと思われます
それによって、プラグインのフォルダ構成にも影響が出ています

baserCMS4系でのBurgerEditorのブロックは以下に配置されていました

/app/Plugins/BurgerEditor/Addon/block/

baserCMS5系では以下になっているようです

/plugins/BurgerEditor/Addon/block

さてここからが本題、とはいえやることは簡単です
コードブロック用のclassを当てたdivタグの中にwysiwygエディタを入れるだけ

問題はそれをどう読み込ませるのかですね
4系を参考にやってみます

今回はbaserCMS5 × BurerEditorで、独自のカスタムブロックを作成してみました
明日からの記事はコードが少し読みやすくなりそうですね

4系と大きく変わったところはなかったですが、scssなどのスタイルについて、少し躓く部分がありました
ネットに情報が多くないので、こういったことをたくさん記事に残していきます

また次回、お会いしましょう