この記事では、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コードボックスブロックの呼び出し方
まずはエディターを開き、ブロック追加ボタンをクリックします。
![](https://saruwakakun.com/sango/wp-content/uploads/2021/05/1b96824b9df1ea2c6f072271d87e12e8.png)
クリックすると、ブロック一覧が表示されるのでその中から「SANGO コード」と書かれたブロックを選択します。
![](https://saruwakakun.com/sango/wp-content/uploads/2021/06/99c92cf4e5fc4ae41405bb0fe2609c39.png)
各種設定項目
入力欄にお好みの言語名やファイル名を入力していただくと、コードの見出しの部分に言語名などが表示されます。
![](https://saruwakakun.com/sango/wp-content/uploads/2021/06/a370fffb13e5e6f4c5d49b61923024d9.png)
コメントを残す