読者です 読者をやめる 読者になる 読者になる

heyheytower

日々のメモです。誰かのお役に立てれば幸いです。

はてなブログで使える Markdown 記法の "引用" 文章を、JavaScript で作成する

JavaScript

TROJ_POWELIKS

目次

目的

表題の件、はてなブログで楽に引用を行うにはどうしたらよいか迷ったので、その試行錯誤と解決法を記載する。

はてなブログ謹製の "引用をストック" を利用する

はてなブログ内だと、範囲選択を行った文章を下記のように引用できる。*1

※ --disable-java : Java アプレットなど実行できないようにJAVA無効化 ※ --no-referrers : GETパラメータで重要情報をやりとりしている場合に備えて referrer 削除指定

Chromeブラウザでのユーザ情報偽装について - heyheytower

ちなみに貼り付けられるタグは下記です。

<blockquote cite="http://maijou2501.hateblo.jp/entry/2015/06/16/013936" data-uuid="6653586347153304808"><p>※ --disable-java : Java アプレットなど実行できないようにJAVA無効化 ※ --no-referrers : GETパラメータで重要情報をやりとりしている場合に備えて referrer 削除指定</p><cite><a href="http://maijou2501.hateblo.jp/entry/2015/06/16/013936">Chromeブラウザでのユーザ情報偽装について - heyheytower</a></cite></blockquote>

簡単に引用できるのは良いのですが、Markdown 記法で記事を書いている時の可読性が悪いですし、引用を見ると改行がうまく引用されていないようでした。
(改行の件は、Ubuntu+Chromeの環境由来かもしれませんが。)

引用したい文章を範囲選択した後、JavaScript(ブックマークレット) で Markdown 記法の引用を作成する

引用したい文章を範囲選択した後、ブラウザのコンソールから JavaScript のコードを実行します。

JavaScript コードを実行すると、下記内容のポップアップが行われます。

> ※ --disable-java : Java アプレットなど実行できないようにJAVA無効化  
> ※ --no-referrers : GETパラメータで重要情報をやりとりしている場合に備えて referrer 削除指定  
> <br /><cite><a href="http://maijou2501.hateblo.jp/entry/2015/06/16/013936">Chromeブラウザでのユーザ情報偽装について - heyheytower</a></cite>

Chrome ならこれを "Ctrl+c" でコピーし*2、他のブラウザならポップアップ内容を範囲指定のうえコピーして利用します。
これを本エントリ(編集方法が "Markdownモード")に貼りつけたものが下記です。

※ --disable-java : Java アプレットなど実行できないようにJAVA無効化
※ --no-referrers : GETパラメータで重要情報をやりとりしている場合に備えて referrer 削除指定

Chromeブラウザでのユーザ情報偽装について - heyheytower

はてなブログ謹製の "引用をストック" と違って、リンクの一行上で改行を行なっています。
これは見やすくするための自分の好みなので、好きに変更すると良いと思います。

こだわりとしては、要素内容は &<> を文字実体参照に置換しています。
属性値のURLは、取得時点で "&<> が文字実体参照でエスケープされていたのでそのまま利用しています。

所感

いままで引用フォーマット作成は手作業だったので、これで引用が捗りそうです。

また、Markdown 記法は方言がたくさんありますので、JavaScript を少し変更すれば引用フォーマットを合わせられると思いますので、広く利用いただければ幸いです。

おまけコード

"現在表示中のページの Markdown 記法のリンクを作成する JavaScript コード" を共有します。

また、 "現在表示中のページの Markdown 記法の脚注を作成し alert() で表示する JavaScript コード" も共有しておきます。

以上。