今日の出来事
- PostgreSQL Advent Calendar を仕上げた
- 姫路に遊びにいった
- Markdownエディタの実装にチャレンジしてみた
所管
高校の同級生と久しぶりにあった。
色々ある。
Vue-markdown って奴で Markdown エディタ を実装にチャレンジしてみた。
前職でvue.js を 完全にマスター してた経験から vue.js を使って 作れる vue-markdown を使って、Markdown エディターを書いて遊んでみた。
雑に紹介すると <vue-markdown> で markdown を囲むと 解釈されて表示される。
<vue-markdown>i am a ~~tast~~ **test**.</vue-markdown>
もっと詳細に見るにはは Live Demo あるのでこっちの方が分かりやすい。
ちょっと改造した成果物
まだ、作りかけなので全然機能とか不十分なんだけど取り敢えず成果物はこんな感じ。
元々は textarea を 更新したら vue.js で イベントフックして リアルタイムプレビュー とか作りたかったんだけど、 CSS をやるってのに終始してしまった。
参考にしたのは 先日 同僚に 教えてもらった FlexBox のサイト。 これが非常に分かりやすかった。
そもそもでいうと、下のツイートをきっかけに 多少の知識をという所で ちょっと前から少しづつCSS を勉強していた。
東京行った時に川島さんがちょうどいらっしゃる日だったので 急に喋らせてもらった。
— イルカ＠JPUG & 岡山swift (@ikkitang) 2019年11月18日
取り敢えず、実践していこう。
今回、見様見真似で 初めて自分で CSS を書いたみたいな感じ。 書いたのが 想定どおりに動くと非常に楽しい。
フロントエンドは 困った時、参考にしているサイトがどうやって実装してるか知れるので躓かなくてすむ。本当に助かる。
今回は社内でも使っている https://esa.io/ のMarkdown エディタを想定してコーディングしてたんだけど、詰まった時にとても参考にさせて頂きました。
今週の週末はあっという間だった。 でも充実していた。
明日からまた頑張ろう。
