NEKOLAB

フローチャート図 とりま、あなたは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を連携させたのにうまく行かなくなった！ 自分のツールとして作っているコードの中で、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部分の冒頭がこの２つの文言になるので、それで判断している 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"...

当ブログに適当にHighlight.jsを導入してみた。 Highlight.js とは サイト中のコードをハイライト化して、コードを読みやすくするjavascript。 Bloggerに導入 Bloggerの管理ページから、[テーマ] > [HTMLの編集] をクリック HTMLの編集画面が出てきたら、以下のHTMLコードをHEADタグ内に入れる。 <link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/github.min.css' rel='stylesheet'/> <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js'/> <script>hljs.initHighlightingOnLoad();</script> と、これだけ。 参考は、 コードのハイライト表示用 JS ライブラリ highlight.js の使い方 から。 投稿記事 投稿するには、至って簡単でHTMLでpreタグとcodeタグで括ってやれば自動的に認識してくれる。 <pre><code>～何かしらコード～</code></pre> 以下のようなイメージになる。 function $initHighlight(block, cls) { try { if (cls.search(/\bno\-highlight\b/) != -1) return process(block, true, 0x0F) + ' class=""'; } catch (e) { /* handle exception */ } for (var i = 0 / 2; i < classes.length; i++) { if (checkC...

Markdown （マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。 Wikipedia より引用 要するに簡単にHTML文書に変換する事ができる言語である。 Markdownを使えるのは、Wikiや一部のブログサービスなど。今は、GitHubではよく使われていて、README.mdのようにmdファイルと呼ばれるそれは、Markdown記法で書かれているそれである。 その特性上、インターネットウェブ上で使われるものであるが、ローカルで使ってみたいと思う人もいる。 それ用のソフトウェアを落とせばいいんだけれど、仕事場だとそういうのにいちいち許可が必要だったりするので面倒臭い…。 インターネットのウェブサイトを見てもいいが、スクリプトを見ても構わんだろう？ ということで、JavascriptでMarkdownをHTMLに変換（parse）できるmerked.jsを使ってみた。 といっても、ちょっと触っただけだけど。 merked.jsの公開場所 merked.jsは、 github で公開されている。 ちなみにウェブ上で試したいだけならば、 デモサイト がある。 使用方法 こと単純でHTMLで組み込んでやればよい。 サンプルは、githubに公開されているとおり。 <!doctype html> <html> <head> <meta charset="utf-8"/> <title>Marked in the browser</title> </head> <body> <div id="content"></div> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script> document.getElementById('content').innerHTML = marked('# Marked i...