マークダウンパーサーの自作

Transcript

1. マークダウンパーサー の自作 2021/12/11 Zli 大LT
2. 自己紹介 HN:朱雀 匠(本名:鈴木 拓眞) Twitter: @suzakutakumi3 Portfolio: http://suzakutakumi.mydns.jp/
5. マークダウンパーサーとは マークダウンをHTML等に変換してくれる奴です。
6. マークダウンを使うところ - Notion - Qiita - GitHub - esa.io - VSCode
7. 使ってて思ったこと - 色変えたい - 改行がスペース2個書かないとされないの意味わからん - 文字サイズも変更したい どうしたら良いのか?
8. 自分で作る!
9. 注意点! 構文解析とか文法解析とかは知らない 行きあたりばったりの何となくで作成しています
10. 見出しの実装 if l>0 and row[0]=='#': cnt=1 while row[cnt]=='#': cnt+=1 if row[cnt]==" ": row="<h%d>"%cnt+row[cnt+1:-4]+"</h%d>"%cnt これは1行:1行の対応なので、簡単に実装できました。
11. リンクの実装 ans=re.search(r"\[.+\]\(.+\)",row) if ans!=None: sl=ans.span() first=row[:sl[0]] second=row[sl[0]:sl[1]] last=row[sl[1]:] content=re.search(r"\[.+\]",second).span() link=re.search(r"\(.+\)",second).span() row=first+'<a href="%s">%s</a>'%(second[link[0]+1:link[1]-1],second[content[0]+1:content[1]-1])+last こちらも1行:1行の対応なので、簡単に実装できました。 正規表現で、その行にリンクがあるか?リンクの位置などを抽出しています。
12. 画像の実装 ans=re.search(r"!\[.*\]\(.+\)",row) if ans!=None: sl=ans.span() first=row[:sl[0]] second=row[sl[0]:sl[1]] last=row[sl[1]:] content=re.search(r"\[.+\]",second).span() link=re.search(r"\(.+\)",second).span() row=first+'<img src="%s" alt="%s"/>'%(second[link[0]+1:link[1]-1],second[content[0]+1:content[1]-1])+last ほぼ、リンクと変わらないですね
13. リストの実装1 リストとは
14. リストの実装2 コードは省略 こちらは一番時間がかかっています。 リストのネストに対応しています。
15. サイズ変更の実装 ans=re.search(r"<[0-9]+>",row) if ans!=None: sl=ans.span() first=row[:sl[0]] second='<font size="%s">'%row[sl[0]+1:sl[1]-1] last=row[sl[1]:] row=first+second+last fin_list.append("</font>") こちらも、正規表現を用いて、サイズの実装をしました。
16. 色の実装 ans=re.search(r"<#[0-9a-fA-F]+>",row) if ans!=None: sl=ans.span() first=row[:sl[0]] second='<font color="%s">'%row[sl[0]+1:sl[1]-1] last=row[sl[1]:] row=first+second+last fin_list.append("</font>") colorTexts=["black","gray","silver","white","blue","navy","teal","green","lime","aqua","yellow","red","fuchsia","olive"," purple","maroon"] for texts in colorTexts: ans=re.search("<%s>"%texts,row) if ans!=None: sl=ans.span() first=row[:sl[0]] second='<font color="%s">'%row[sl[0]+1:sl[1]-1] last=row[sl[1]:] row=first+second+last fin_list.append("</font>") こちらも正規表現を利用して、実装しています。
17. デモ
18. Webサーバでの実装 将来的には、自分のポートフォリオサイトで使いたいので、Webで編 集できるようにしたい!
19. Flaskで実装 from flask import Flask,render_template,request import sys sys.path.append( '../') from command import MarkdownParser as MP app = Flask(__name__) @app.route('/') def Index(): return render_template( "index.html") @app.route('/test',methods=['GET','POST']) def Test(): data=request.get_data().decode() ans=MP.main(data.split( '\n')) return '\n'.join(ans) if __name__ == "__main__": app.run(debug=True) /testにアクセスすると、bodyの内容を 先ほど作ったマークダウンパーサーを呼び出し、変換しています。
20. デモ
21. 今後について • シンタックスハイライトの対応やその他の便利機能を追加する • 構文解析などを習ったので、もう少ししっかりした設計にしたい • CSSをしっかりさせる • 自分のポートフォリオ用に適応させる
22. 最後に 下のリンクからプログラムがおいてあるリポジトリを見ることができます。 https://github.com/suzakutakumi/MarkdownParser