たこつぼくらぶ

更新履歴

【配布】てがろぐをマークダウンで書くスクリプト

【概要】
  • Javascriptで、てがろぐで書いた文章をマークダウンに変換します
  • マークダウンに変換する markdown-it
  • コードを書いたとき、いい感じに色を付ける highlight.js
  • 許諾・報告不要です。ご自由にコピペしてご利用ください。
  • 非公式のため、使用にあたり自己責任でお願いいたします。


【注意事項】
てがろぐのリンクの記法とコード(インライン・ブロック)の記法の併用はできません(技術不足です!すみません)
てがろぐ側の機能をオフにするか、URLが書かれた範囲をマークダウンに変換する範囲から外して書く必要があります。

 2023/12/09できました!公式のサポート掲示板でご教示 いただきました…!
 https\://www.example.comのように書く必要があります。

また、マークダウンで変換した後はマークダウン用の装飾をCSS側で設定してあげてください。

【使い方】
まず、使用するにあたり、マークダウンに変換したい範囲を指定します。
てがろぐ本文すべてと、一部を変換するかで方法が異なります。

---1.本文すべてをマークダウンにしたい場合 (一部てがろぐの装飾記法が使えなくなります)
てがろぐ本文([[COMMENT]])を<div class="comment">[[COMMENT]]</div>このように囲んでください。
クラス名はお好きな内容で問題ありませんが、この後記述するスクリプト内で適切に書き換えてください。

---2.本文の一部をマークダウンにしたい場合、自由装飾記法で指定します。
投稿本文の指定したい部分を、決まった名前(ここでは「md」と指定します)で指定してください。


続いて、下記のコードをコピペして、外側スキンの<body>内に追記します。


13行目の var inputElements = document.querySelectorAll('.comment');で、
<div class="comment">にした人はそのまま、
自由装飾記法「md」で指定した人はvar inputElements = document.querySelectorAll('.deco-md');と変更します。

マークダウンだけ使いたい人はこれで完成です。
46行目以降は、コードを記述したい人向けなので、使わない場合は削除して大丈夫です。

highlight.jsを使う人向け
スタイルシートはできればheadタグ内で読み込んでください。
highlight.jsの公式サイト で、好きなデザインを選べます。
「Theme」で選んだ名前を確認して、48行目の「~styles/名前.min.css」部分を書き換えてください。
例ではmonokaiを選んでいます。

また、コードブロックとてがろぐの自動URLリンクの相性が悪いため、ソース内でURLを書くと<a>タグになって出力されてしまいおかしなことになります…。
URLの処理を全部設定からオフにすれば問題ありませんが、動画や音楽の埋め込みリンクなども一切効かなくなります。
このあたりの解決方法があれば教えてください!(T_T)

→(上記の通り解決済)

【備考】
マークダウンの記法自体は注意事項に上げたもの以外はmarkdown-itに準じます。
今回使用したサイトのデモページが参考になります。
markdown-it
オプションのカスタマイズもできるので、できそうな方はやってみてください!
(GitHubのページ)

マークダウンでのテーブルジェネレーターもあります。
Markdown表テーブル作成ツール


使用ライブラリ
markdown-it - MIT License
highlight.js - BSD 3-Clause License