## 記事投稿を習慣づけたい
平日以外では初めての記事投稿です。
色々と備忘録として残しておきたい知識や方法は沢山あるんですが、まだ投稿するのが習慣づいてなく、SNSで小出しにメモっていたりします。少しでも気軽に記事投稿ができるように、サイトを弄ってテックブログっぽくすればやる気もでるのかなあと思ったので、一先ずmarked.jsを使ってMarkdown記法で記事を書けるようにします。
## Marked.jsをはまぞうで使う
Marked.jsはMarkdownからHTMLにパースするJavaScriptのライブラリです。
[GitHub - markedjs/marked: A markdown parser and compiler. Built for speed.]
npmを使ったインストールが簡単ですが、はまぞうの記事投稿に使いたいのでnpmはもちろん使えません。リソースファイルのHTMLも書き換えられないのでスクリプトを外部ファイルとして読み込むのもできません。なのでCDNからとってきて、記事に埋め込みます。
記事内のHTMLタグはエスケープしなければ実際に描画に使われるので、タグ埋め込みであればサーバー管理人でなくてもHTMLの付加ができます。
```markup
```
divタグにidを指定し、その内容を即座にパースして描画する方法で実現します。
また引用で`>`を使うときにエスケープされると困るので置換し、オプションで改行をしやすく設定します。
```markup
## Marked.jsをはまぞうで使う
```
これを記事投稿スペースに貼り付ければ、HTMLタグで囲ったりしなくてもMarkdonw記法で書いて簡単に記事投稿できる！素敵！
## リンクを新しいタブで表示する
Marked.jsは簡単にMarkdown記法を実現できるライブラリですが、まだ対応していない記法もあります。本来Markdown記法でリンクを新しいタブで表示するには以下のように書きます。
```markup
[link](URL){:target="_blank"}
```
しかし、Marked.jsではこの記法に対応していないので、先程のスクリプトに追記して記事内のリンクは全て新しいタブで表示できるようにします。
```javascript
const a_tags = content.querySelectorAll('a');
for (let a_tag of a_tags) { a_tag.setAttribute('target', '_blank'); }
```
divに描画された段階でaタグにパースされたものを変数に配列として格納し、タグ一つ一つに属性を付加します。
## まとめ
scriptタグの記事内埋め込みで色々なことがサイト内で実現できそうな予感がします。
数記事ほど前からPrism.jsを使ってプログラミングコードのシンタックスハイライトも行っているので、テックブログっぽくなってきました。ただ問題として今のままでは記事1つ1つごとにタグを書かなければいけないので、カスタムテンプレートに記述して1回で全ての記事に反映させたいなあと思っています。
[GitHub - markedjs/marked: A markdown parser and compiler. Built for speed.]: https://github.com/markedjs/marked
