Markdown to PDFが使えないから代替サービスを探した話

つい先日から「Markdown to PDF」が使えない…理由はわかりませんがアクセスしても「このサイトにアクセスできません」と表示されてしい使えない…

Markdown to PDF

http://md2pdf.higty.xyz/md2html

僕はMarkdownでメモを取るときや、ブログを書く時基本的にこのサイトを使っていたので大変困った…特にブログに関してはいつもマークダウンで記述しこのサイトでHTMLに変換してその情報をコピペで書いているのでこれが使えないといちいちHTMLで文章をかかなくてはならなくなり非常にめんどくさい。

代替案

ネットで調べたがこのサービスが落ちている事自体あんまり話題になっていないようで、「markdown to html」で検索すると「Markdown to PDFを使いましょう！」という記事ばかりで困ったがそんな中でもいくつか手段があった。

jsのライブラリを使って変換する

JSのライブラリでmarkdownをHTMLに変換してくれる物があるようだ。ただ、そのためだけに自分でサービスを作るのすら面倒だと思った僕はこれを却下

markdownをHTMLでプレビューしてくれるサービスを使う

結局僕はこっちで解決した。世の中にはmarkdwonをHTMLの形でプレビューしてくれるサービスはちょこちょこあった。ただ、ワンクリックでそれをHTMLの形でコピーすることができるサービスはなく、わざわざディベロッパーツールを開いて該当の箇所のHTMLをコピーするという手順を踏まなければならなかった… それは非常に面倒だ…ということで、Chromeの拡張を使ってボタンを配置し、それを押したらMarkdownをHTMLに変換したものをクリップボードに保存する機能を追加することにした。使ったサービスはこちらhttp://demo.showdownjs.com/

手順

ScriptAutoRunnerをインストール
下記のコードを「Write your own code here.」の場所に貼り付ける

element = document.getElementById('preview')
var button = document.createElement('button');
button.textContent = 'get HTML';
button.style = "height: 10px; width: 20px;";
button.onclick = function() { getHtml() };
element.parentNode.insertBefore(button, element);


function getHtml(){
  execCopy(document.querySelector('#preview div').innerHTML)
}

function execCopy(string){

  var tmp = document.createElement("div");
  var pre = document.createElement('pre');
  pre.style.webkitUserSelect = 'auto';
  pre.style.userSelect = 'auto';

  tmp.appendChild(pre).textContent = string;

  var s = tmp.style;
  s.position = 'fixed';
  s.right = '200%';
  document.body.appendChild(tmp);
  document.getSelection().selectAllChildren(tmp);

  var result = document.execCommand("copy");

  document.body.removeChild(tmp);

  return result;
}

ドメインを「Target hostname. By default, target to all host.」と書いてある場所に入力
以上

こんな形で実装すると下記のようにもともと何もなかった場所にボタンが生まれ、そこを押すと右側のHTML情報がクリップボードに保存される！