Gutenberg完全対応のSANGO Gutenberg について

【SANGO コードボックスブロック】の使い方

この記事では、SANGO Gutenberg プラグインのオリジナルブロックである【SANGO コードボックスブロック】について解説していきます。

SANGOのカスタマイズ方法を記事にする時に最適かと思います。例えば以下のようなコードを【SANGO コードボックスブロック】で表現できます。

サンプル例

HTML
<!DOCTYPE html>
<html>
<head>
  <title>サルワカ</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ゼロからウェブデザインを勉強しよう!</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>
JavaScript
const saruwaka = 'saruwaka'

まずは、使い方をざっくりと掴んでいただけるように動画を用意しましたのでご覧ください。

SANGOコードボックスブロックの呼び出し方

まずはエディターを開き、ブロック追加ボタンをクリックします。

クリックすると、ブロック一覧が表示されるのでその中から「SANGO コード」と書かれたブロックを選択します。

各種設定項目

言語名やファイル名の変更

入力欄にお好みの言語名やファイル名を入力していただくと、コードの見出しの部分に言語名などが表示されます。

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。