Markdownというフォーマット、使いやすいのに、何でcssやhtmlだけで表示することが出来ないんでしょう？
display:markdownなんていう命令を用意してくれてもいいと思うし、
<markdown></markdown>
っていうタグを作ってくれてもいいのにな〜と、考えながら、自分で作ったMarkdownライブラリを更新して、
ホームページ制作などで使っている今現在です。
以前作った、Markdown_viewというライブラリを、新しく作っているホームページで使おうと思ったら、思いの外使いづらかったので、色々とバージョンアップしてみることにしました。
Markdownはなんで使いやすいのか？
HTMLタグを書く方式とMarkdownで書く方式では、何が違うのかわからない初心者エンジニアの人もいるでしょう。
何を隠そう、ボクもずっとそう思ってました。
Markdownの方が書き終えたテキストがずっとスッキリしているため、その後修正をするのが楽という点が一番大きですね。
いっそのこと、ホームページもmarkdownだけで作る方式にした方がいいんではないかぐらいに考えてしまいました。
そのためには、SEOでタグが認識されるために、サーバーサイドレンダリングでmarkdownをhtmlタグに変換しなければいけないので、
サクっとhtmlだけ作って公開するというわけにはいかないんですよね〜。
今回の改修目的
そういうシステム的なことは今回は考えずに、
まずは、markdown形式のテキストを、ホームページでカンタンに表示させることができるという事で、簡単に設置できなければ何の意味もありません。
確かに前回のバージョンでは、ライブラリを読み込んで、対象項目などをの設定を送り込むと、ページ読み込みのタイミングで、特定のelement内がのテキスト(markdown記述）がhtmlに変換されて表示できるという、ほぼ自動的な仕様だったのですが、
任意の箇所を任意のタイミングでmarkdown表示変換(markdownからhtmlに変換）したいという方が、システム開発側としては、使いやすいライブラリだという事に気がついてしまいました。
アフォですね、おいら。
ということで、今回は、
markdownテキストを、htmlに変換して値を返してくれる機能と、
任意のelementを指定したら、その中に記述されているmarkdownテキストをhtmlタグに変換して設置してくれる機能の２つを搭載して、より使いやすいライブラリとしてバージョンアップさせておきます。
改修ポイント
前回構築したコードをclass化するというのは、さほど難しくないのですが、
エディタで見てみると、なんだか非推奨の書き方があるのが分かりました。
これは、h1~h6タグへの変換する関数なんですが、match関数を実行した直後で、「RegExp.$1」という風にすると、正規表現でマッチした値を取り出せる古くからある方法が、非推奨になっていたようです。
（気がついていたのに、直すのがめんどくさくて放ったらかしていただけでした・・・）
参考 : [MDN] 非推奨の機能、廃止された機能
全体的にこの記述をしていたので、記述箇所の書き換えを行います。
あ、ちなみに、このmatchの修正方法は、次のようになります。
# これまでの記述
if(text.match(/^(.*?)#{6} (.*?)$/)){
text = RegExp.$1 +"<h6><a name='"+RegExp.$2+"'>"+ RegExp.$2 +"</a></h6>";
}
# 修正した記述
const reg = RegExp('^(.*?)#{6} (.*?)$' , 's')
const res = text.match(reg)
text = res[1] + "<h6><a name='"+res[2]+"'>"+ res[2] +"/<a></h6>";
記述が2行から3行に増えたように思えますが、match関数の戻り値が配列で返ってくるので（matchしている場合のみ）値で対応すればいいだけなんですね。
あとは、単純にテキストを変換するだけの機能を追加して更新完了です。
使い方
READ.mdにも記載しておいたのですが、以下のように使います。
1. 使用したいページに、main.cssを読み込む。（htmlのhead内に以下のタグを埋め込む）
<link rel='stylesheet' href='markdown_viewer/src/main.css'/>
2. 実行したいjavascriptでmain.jsを読み込んで、変換したい文字が含まれている対象のエレメントをセットする。
<script type='module'>
import { Markdown as MD} from from './markdown_viewer/src/main.js'
new Markdown({elm : element})
</script>
3. 任意のタイミングで、任意のelement内を変換したい場合
<script type='module'>
import { Markdown as MD} from from './markdown_viewer/src/main.js'
const element = document.querySelector('target-element')
element.innerHTML = new Markdown().convert(element.innerHTML)
</script>
これで、ほかツールで組み込むこともラクになりますね。
あとがき
いや〜改めて、ライブラリを作る時の、利用場面が重要ということを、自分で作ったライブラリで理解してしまいました。
こういう仕様を決めるのって、エンジニアのひとつの試練でもあるので、それを使う他人に用意に判断されてしまうポイントなので、
しっかりと思考した方がいい点というのが分かりました。
やはりこうした経験重要ですね。
しかも、これって自分で経験しないとためられないスキルなのだということも、とてもよく理解できた！
前回の記事
markdownのtextデータをhtmlタグにコンバートするツール「markdown_viewer」
