PythonとStreamlitで爆速開発！自分だけのMarkdownチートシートWebアプリを作ろう

#!/usr/bin/env -S python -m streamlit run

import streamlit as st

# アプリのアイコンを設定
icon = 'https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg'

# ページ全体の設定
st.set_page_config(
    page_title='Markdown Cheatsheet',
    page_icon=icon,
    layout='wide'
)

# ヘッダーにロゴとリンクを配置
st.logo(icon, link='https://github.github.com/gfm/')
st.markdown('### Markdown チートシート')

# 画面を2つのカラムに分割
left, right = st.columns(2)

# --- 左カラム ---
with left:
    # テキスト書式
    st.markdown('**:memo: テキスト書式**')
    st.markdown('''
要素 | :green[HTML] | 用法
---|---|---
見出し | `<h1>`～`<h6>` | `# h1<br>## h2<br>### h3<br>#### h4<br>##### h5<br>###### h6`
太字 | `<strong>` | `**太字**`
斜体 | `<em>` | `*斜体*`
太字と斜体 | `<strong><em>` | `***太字と斜体***`
取り消し線 | `<strike>` | `~~取り消し線~~`
引用 | `<blockquote>` | `> 引用文`
ネストした引用 | `<blockquote>` | `> 引用文<br>> > ネストした引用文`
インラインコード | `<code>` | `` `print("Hello")` ``
区切り線 | `<hr>` | `---` もしくは `***`
改行 | `<br/>` | 行末に半角スペースを2つ
エスケープ | -- | `\\`（特殊文字の前に置く）
''')
    
    # リスト
    st.markdown('**:material/format_list_bulleted: リスト**')
    st.markdown('''
要素 | :green-background[HTML] | 用法
---|---|---
順序なしリスト | `<ul><li>` | `- リスト<br>  - ネストしたリスト`
順序付きリスト | `<ol><li>` | `1. リスト<br>   1. ネストしたリスト`
タスクリスト | `<input type=checkbox>` | `- [x] 完了タスク<br>- [ ] 未完了タスク`
''')

    # リンクと画像
    with st.expander('**リンクと画像**', icon='🔗'):
        st.markdown('''
要素 | HTML | 用法
---|---|---
リンク | `<a href=...>` | `[表示テキスト](URL)`
画像 | `<img src=...>` | `![代替テキスト](画像URL)`
''')


# --- 右カラム ---
with right:
    # 表（折りたたみ、デフォルトで展開）
    with st.expander('**表**', icon=':material/table:', expanded=True):
        st.markdown("コロン `:` を使うことで、列の文字寄せ（左寄せ、中央寄せ、右寄せ）を制御できます。")
        '''```
| 左寄せ | 中央寄せ | 右寄せ |
| :--- | :---: | ---: |
| あああ | いいい | ううう |
| 文字 | 文字 | 文字 |
```'''
    
    # 高度な記法
    with st.expander('**:sparkles: 高度な記法**'):
        st.markdown('''
要素 | :violet[HTML] | 用法
---|---|---
脚注 | -- | `ここに文章 [^1]`<br>`[^1]: ここに脚注の内容`
定義リスト | `<dl><dt><dd>` | `用語`<br>`: 用語の説明`
HTMLの直接利用 | -- | `<details><summary>クリックして開く</summary>詳細</details>`
''')
        st.markdown("---")
        st.markdown("##### 表示例:")
        
        st.markdown("ここに脚注を利用した文章です [^1]。")
        st.markdown("[^1]: これは脚注です。文章の最後にまとめられます。")
        
        st.markdown('''
<dl>
  <dt>Markdown</dt>
  <dd>文章を記述するための軽量マークアップ言語の一つです。</dd>
</dl>
''', unsafe_allow_html=True)
        
        st.markdown('''
<details>
  <summary>クリックして詳細を表示</summary>
  Markdown内では、このようにHTMLタグを直接記述して、より複雑な表現も可能です。
</details>
''', unsafe_allow_html=True)

left, right = st.columns(2)

# 左カラムに表示
with left:
    st.markdown('**:memo: テキスト書式**') # <-- タイトルもMarkdown
    st.markdown('''
要素 | :green[HTML] | 用法
---|---|---
見出し | ... | ...
...
''')

# 右カラムに表示
with right:
    with st.expander('**表**', icon=':material/table:', expanded=True):
        st.markdown("コロン `:` を使うことで...")
        '''```
        ...表の書き方のサンプル...
        ```'''