HTMLをマークダウン形式に変換「reverse_markdown」

参考

Github
reverse_markdown

×　マークダウン形式　→ 　HTML形式　 変換ではなく
○　HTML形式　→ 　マークダウン形式 　変換したい
そんな時に便利なgemでした。

実装経緯

• ウィジウィグ使用して保存されているHTML形式データを取り出してマークダウン形式に変換
• それをCSV出力

(※今回ウィジウィグ・CSV出力については割愛させていただきます。)

上記を行う事があったため
reverse_markdown（gem)
を使用して実装してみた。ありがたや...
忘れないようにメモ。

結論

テスト的に下記のようなHTML文を変換すると...

<h3>項目タイトル</h3>

<p><a href="https://www.yahoo.co.jp/">test</a></p>

<p><img alt="【画像出典元】" height="165" src="https://www.google.com/"></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><u>小見出し線</u></p>

<p><strong>太字</strong></p>

<p>&nbsp;</p>

<p>改行<br />
改行</p>

<p><a href="http://www.yahoo.co.jp" rel="nofollow noopener" target="_blank"><img alt="test" loading="lazy" src="https://storage.googleapis.com/p_6389d443ca4a512e0cdf411a/9c9b372b-0f7f-4c71-bce8-cd5eb9a5f3f5%2F4977722_s.jpg" /></a></p>

<p><a href="https://storage.googleapis.com/p_6389d443ca4a512e0cdf411a/9c9b372b-0f7f-4c71-bce8-cd5eb9a5f3f5%2F4977722_s.jpg" rel="noopener noreferrer" target="_blank"><img alt="test" src="test.jpg" style="max-width:100%;" /></a></p>

1.項目タイトル

### 項目タイトル

##  項目タイトル

[test](https://www.yahoo.co.jp/)

![【画像出典元】](https://www.google.com/)

 

 

 

<u>小見出し線</u>

**太字**

&nbsp;

改行  
 改行


[![test](test.jpg)](http://www.yahoo.co.jp)

[![test](test.jpg)](test.jpg)

&nbsp;

わかったこと(箇条書き）

• brタグ、pタグは変換時に消える(gsubで対応すればなんとかなる）
• figureタグに囲まれている画像データ(img要素）は変換されない

その他は試してないので分からない。（ご自身でお試しください。）

使い方（基本機能のみ）

ReverseMarkdownのGemをインストール後、

ReverseMarkdown.convert 変数　#変数にはHTML要素を格納した変数

他にもオプションなどがある様でしたが、今回は基本的なものだけを使わせていただきました。
Gemのインストール方法についてはこちらを参考にさせて頂きました。
「reverse_markdown」