Gatsbyサイトでコードを共有するときのデザイン・機能を作った
コードをブログで載せるのであれば、なるべく読者にとってみやすく、使いやすいデザインにしたいと考えている。
なので、個人的に使いやすいようにデザインしてみた。遊びゴコロも混ぜながら。
ここでは、mdにおける基本的な使い方は載せない。基本的な使い方は別記事を参考にして欲しい。
基本的な使い方
基本的には、<CodeBox></CodeBox>でコードを囲めばいい。
引数は5つある。
top: topを表示するかしないか。
title='title': ボックスのタイトル
mark: Mac風のアイコンを表示するか
copy: コピーボタンを表示するか
num='num': 後述する。今の段階では必要ない。
top, mark, copyは指定しないことで非表示にできる。
titleはtitle=''とすることで、非表示にできる。
全ての引数を利用した場合
<CodeBox top title='HTML' mark copy>
```html
<div class="amzn-link-img">
<img src="画像リンク">
</div>
```
</CodeBox>HTML
<div class="amzn-link-img">
<img src="画像リンク">
</div>markを消した場合
<CodeBox top title='HTML' copy>
```html
<div class="amzn-link-img">
<img src="画像リンク">
</div>
```
</CodeBox>HTML
<div class="amzn-link-img">
<img src="画像リンク">
</div>markとcopyを消した場合
<CodeBox top title='HTML'>
```html
<div class="amzn-link-img">
<img src="画像リンク">
</div>
```
</CodeBox>HTML
<div class="amzn-link-img">
<img src="画像リンク">
</div>topを消した場合
topを消すと、他の引数の意味がなくなる。
<CodeBox title='HTML' mark copy>
```html
<div class="amzn-link-img">
<img src="画像リンク">
</div>
```
</CodeBox><div class="amzn-link-img">
<img src="画像リンク">
</div>複数のコードをボタンで切り替える
一度に複数のコードを入力することが可能。
その場合には、<CodeBox></CodeBox>の中に<Code></Code>を挿入する。
その場合、CodeBoxの引数にnum=“数字”を入力する。なお、数字はページの中で重ならないように設定する。
num='num': CodeBoxに割り振る数字。1ページの中で一意の数字にする。
また、<Code></Code>の引数は3つある。
childNum='num': CodeBox内で一意の数字を使う
name='name': Codeのタイトルを設定する
contentEditable: コードの編集を可能にする
とりあえず、例をみた方が早い。
<CodeBox top title='タイトル' mark copy num="1">
<Code childNum="1" name="html">
```html
<p>numは同一ページで一意の数字、childNumはCodeBox内で一意の数字</p>
```
</Code>
<Code childNum="2" name="css">
```css
p {
margin: 30px;
}
```
</Code>
<Code childNum="3" name="js">
```js
console.log("CopyはTab切り替えで変化する")
```
</Code>
</CodeBox>タイトル
<p>numは同一ページで一意の数字、childNumはCodeBox内で一意の数字</p>p {
margin: 30px;
}console.log("CopyはTab切り替えで変化する")Copyボタンは、タブを切り替えるとコピーする内容もしっかり変化する。試してみて欲しい。
<CodeBox top title='タイトル' mark copy num="2">
<Code childNum="0" name="html" contentEditable>
```html
<p>"num"を2にしている。項目が一つなら、これを使うべきでない。</p>
<p>また、ChildNum="0"にすると、タブが消える。</p>
<p>contentEditableなので、テキストの編集ができる。</p>
```
</Code>
</CodeBox>タイトル
<p>"num"を2にしている。</p>
<p>また、ChildNum="0"にすると、タブが消える。</p>
<p>contentEditableなので、テキストの編集ができる。</p>ここでは、CodeBoxのnumが2になっている。このように、ページ内で一意の数字を割り振って欲しい。
また、childNumを0にするとタブが消える。基本的には使わないが、テキスト編集を有効化するときに使うかもしれない。
なお、前述したがコードの編集が可能である。試しに編集してみて欲しい。また、編集したら、Copy内容が変わる。試して欲しい。
<CodeBox top title='タイトル' mark copy num="3">
<Code childNum="1" name="html" contentEditable>
```html
<p>num=3にしている。</p>
<p>テキストの編集ができる。</p>
<p>編集すると、コピー内容も変わる。</p>
```
</Code>
<Code childNum="2" name="css">
```css
p {
margin: 30px;
}
```
</Code>
<Code childNum="3" name="js">
```js
console.log("contentEditableは使い所があると思う。個人的に。")
```
</Code>
</CodeBox>タイトル
<p>num=3にしている。</p>
<p>テキストの編集ができる。</p>
<p>編集すると、コピー内容も変わる。</p>p {
margin: 30px;
}console.log("contentEditableは使い所があると思う。個人的に。")ここでは、編集できるコードを編集できないコードを混ぜてみた。
なお、気づいているかもしれないが、編集できるコードの特徴は2つある。
- カーソルの形が変わる
- コードをクリックすることで赤いキャレットが表示される
また、編集した内容はMacであれば、command+z、 windowsであればCtrl+zで戻せる。
余談: 編集可能なコードにはeditableという文字だったり、resetボタンと載せようと思いましたが、デザインが崩れるのでやめました・・・
なので、編集についてはデザイン(前述の2つの特徴)、リセットについてはキーボード操作で代用しました。
