投稿

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

git commitしたらmarkdownがHTML化する

イメージ
Blogger用にHTMLソースがほしいのだ 2つブログが持っている。 qiita と blogger だ。 qiitaはmarkdownをそのまま使える。だが、bloggerでmarkdownは使えない。 bloggerで使えるのは、HTMLだ。 もちろん編集しやすいのは、当然markdownだ。なので、できれば、markdownだけ作りHTMLを生成したい。 結論:git commitしたらHTML化できるようにする そこで「git commitしたら勝手にmdファイルがhtmlになったら楽だろう」と考えた。 いろいろな方法があるだろうが、とりあえず以下のスキームを作った。 1.markedを導入 markdownをHTML化する方法はいくらかある。自分が使用したのは、 marked.js だ。 コマンドラインで使いやすいことで採用した。marked.jsをクライアント上で使用できるようにするには、Node.jsを導入している環境で、以下のコマンドを入れる。 npm install -g marked あとは、以下のコマンドで使えるようになる。 $ marked -o hello.html hello world ^D $ cat hello.html <p>hello world</p> 詳しくは、 marked.js を参照してほしい。 2.Gitフックを利用するためpre-commit作成 GitにはGitコマンドを実行した契機でスクリプトを起動するためのgit hookという仕組みがある。 参考: Git フックの基本的な使い方 - Qiita ここでは、pre-commitを編集する。 まず「.git/hooks」フォルダ内の「pre-commit」ファイルを編集する。 以下のようなスクリプトを作成した。ちなみにshellで作成している。 #!/bin/sh # pre-commit # Convert to HTML File From MD File. # Date: 2019-05-05 # Author: Neko619<yasagureneko.trpg@gmail.com> # MEMO:最初は必ず.gitと同じディレクトリになる # pwd # チェックす...

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"...

[HTML+CSS]タイトルをクリックすると詳細が表示される実装

イメージ
タイトルをクリックするとその詳細が表示されるものをCSSだけで実装するものを仕事のなかで作った。 インターネットで参考にしたものをちょろっと変えたものだけれど。 CSSで実装できるのは、作るのも簡単だし見栄えもいいのでとてもいい。 参考元: https://saruwakakun.com/html-css/reference/accordion 表示されるブラウザの様子 HTML+CSS <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>ラベルをクリックすると詳細が表示される</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> <!-- /* スタイルシート 外出したほうがいい */ /* ラベルをあわせるとマウスポインタを変更 */ .content label { background-color: #cccccc; cursor :pointer; display: block; } /* チェックボックスは不可視にする */ .content .chklbl { display: none; } /* 詳細は通常不可視にする */ .content .detail { background-color: #666666; padding-left: 1em; display: none; } /* ラベルをクリックする(内部的にチェックする)と、 詳細を可視化する */ .chklbl:checked + label + .detail { display: block; } /* ラベルの冒頭に+を表示 */ .content label...