投稿

ラベル(Markdown)が付いた投稿を表示しています

Markdownを活用するためのフローチャート

イメージ
フローチャート図 とりま、あなたはMarkdownを使いたいんですね? いいでしょう。さて、あなたは今どういう状況でしょうか? フローチャートに従って見ていきます。 フローチャートで確認したら、以下のリンクで記事内から飛んで見てください。 オンラインでどうぞ エディタを使おう ローカルでmarked.jsを使おう mdwikiを使おう スタンドアロンでmarkedとhttplistenerも使おう オンラインでどうぞ エディタとかよくわかんない! パソコンなんて高いし持ってない! という貴方! ともあれ、これを見ているということは、きっとスマホやタブレットでネットも繋がる状態!という方のはずです。 であれば、下のサイトにアクセスすればMarkdownに触れます。 Dillinger markdown-it demo Marked Demo Marked Demoの方をアクセスしてみましょう。 右側にMarkdownを入れると、左側にリアルタイムで表示されますね。 でも、スマホでMarkDown使う猛者っているかしら・・・? エディタを使おう つべこべ言わずエディタを使いましょう。 Markdownを使う人は、だいたいエンジニアを自称できる人なはず。今は高機能なエディタが充実しています。だから、好みのエディタを使えばいいじゃん! Atom Visual Studio Code Sublime Text Vim 有名所には、オフィシャルでだったり有志がプラグインでだったりで、WYSIWYGできるようにビューアーを見れるようにしているので、間違いないでしょう。 私は、 自宅では VSCodeを使ってます。 ローカルでmarked.jsを使おう はい!この記事のここからが本番です! 会社などでは自由にソフトウェアインストールできない人もいますよね! 今日日、方向性のおかしなセキュリティ意識が働いているのか、そういう会社、ありますよね。ほんまもう…。 まあ、ネットが使えればネットのエディタを使えばよいかと思いますが、ローカル環境でやりたい人もいますよね。 じゃ、とりあえずなんとかこっそり以下のJavaScriptコードを仕込まえてください。 JavaScriptは、ソフトウェアでは? 大丈夫!...

MerkedとMermaidを連携ができずうがーってなって微調整した

イメージ
MerkedとMermaidを連携させたのにうまく行かなくなった! 自分のツールとして作っているコードの中で、MarkedとMermaidの連携について、mermaid.jsの見本である mermaidjs.github.io - Usage のExample of a marked rendererをそのまま使っていた。 しかし、最近なぜかうまく表示されなくなった。原因は、この記事執筆時点でも未だにわからず。 コードの紹介 Usageにかかれていたコードは以下のとおり。 要するに、markdownの ``` に当たる部分でmermaidの構文を書いた場合に、mermaidが適用できる(<div class="mermaid">に記述した構文をmermaidがsvg画像化してくれる)ようにmarkedがDIVタグを加えるようHTML変換する仕組みを取るという、ごく単純な方法だ。 var renderer = new marked.Renderer(); renderer.code = function (code, language) { // mermaidはcode部分の冒頭がこの2つの文言になるので、それで判断している if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){ // divタグを加えて上げると、mermaidが認識してくれるのだ! return '<div class="mermaid">'+code+'</div>'; } else{ return '<pre><code>'+code+'</code></pre>'; } }; HTMLツール全体としては、以下のソースにしていた。これに、mermaidの構文を含むmdファイルを読み込ませることで、mermaidを図化する方式をとっていた。 <!DOCTYPE html> <html lang="jp"...