Markdownで記事を綺麗に表示する — コードハイライトと目次【AIと一緒に作るDjangoブログ入門 #6.1】

"""
Markdown を HTML に変換するテンプレートタグ。

テンプレートでの使い方:
    {% load markdown_tags %}
    {{ post.body|markdownify|safe }}

特徴:
- Qiita風の「```python:filename.py」記法に対応
- Pygmentsでシンタックスハイライト
- ファイル名ラベル付きのコードブロックを生成
"""

import re

import bleach
import markdown as md
from django import template
from django.utils.html import escape
from django.utils.safestring import mark_safe


# ============================================================
# bleach サニタイズ設定
# ============================================================
# 投稿者由来の HTML を「安全な要素・属性だけ」に絞り込む allowlist。
# 単独運用なら過剰だが、将来「複数人投稿」や「読者投稿」に拡張した時に
# XSS の入り口を残さないための保険。
# 注意：独自実装の要素（codehilite / 吹き出し / 目次 等）も許可リストに含めること。
#       漏れるとそれらの表示が壊れる。
# ============================================================

ALLOWED_TAGS = [
    'p', 'br', 'hr', 'div', 'span',
    'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
    'blockquote', 'pre', 'code',
    'ul', 'ol', 'li',
    'table', 'thead', 'tbody', 'tr', 'th', 'td',
    'strong', 'em', 'b', 'i', 'u', 's', 'del', 'ins', 'mark', 'sub', 'sup',
    'a', 'img',
    'cite', 'kbd', 'samp', 'var',
    'figure', 'figcaption',
    'button', 'svg', 'path', 'rect', 'circle',  # コピーボタン用
    'details', 'summary',
]

ALLOWED_ATTRIBUTES = {
    '*': ['class', 'id', 'title', 'data-source-line', 'aria-label', 'aria-hidden'],
    'a': ['href', 'rel', 'target'],
    'img': ['src', 'alt', 'width', 'height', 'loading'],
    'th': ['scope', 'colspan', 'rowspan'],
    'td': ['colspan', 'rowspan'],
    'button': ['type'],
    'svg': ['xmlns', 'width', 'height', 'viewBox', 'fill', 'stroke', 'stroke-width',
            'stroke-linecap', 'stroke-linejoin'],
    'path': ['d'],
    'rect': ['x', 'y', 'width', 'height', 'rx', 'ry'],
    'circle': ['cx', 'cy', 'r'],
}

ALLOWED_PROTOCOLS = ['http', 'https', 'mailto']


def _sanitize_html(html):
    """bleach allowlist でサニタイズしてXSSの入り口を防ぐ。"""
    return bleach.clean(
        html,
        tags=ALLOWED_TAGS,
        attributes=ALLOWED_ATTRIBUTES,
        protocols=ALLOWED_PROTOCOLS,
        strip=False,  # 不許可タグは消さずエスケープ表示（黙って消すとデバッグが辛い）
    )


register = template.Library()


def _replace_named_code_blocks(text):
    """「```lang:filename」記法を見つけて、後で復元できる目印に置き換える。

    通常のmarkdownライブラリはfilename部分を理解できないので、
    一旦取り出して、HTML変換後にファイル名ラベル付きで復元する。

    フェンスの入れ子に対応する（CommonMark準拠）。
    外側の長いフェンス（例: ````markdown）の“中”にある ```python:views.py は
    「記法を見せるための文字列」なので抽出せず、そのままコードとして表示する。
    トップレベルにある ```lang:filename だけを本物のファイル名ブロックとして取り出す。
    （単純な正規表現だと ```` の中の ``` まで拾ってしまい、入れ子の例が壊れる）
    """
    lines = text.split('\n')
    out = []
    blocks = []
    open_fence = ''  # 今いる“通常”フェンスの記号（``` や ```` ~~~）。空ならトップレベル
    i = 0
    n = len(lines)

    while i < n:
        line = lines[i]
        stripped = line.strip()
        m = re.match(r'^(`{3,}|~{3,})', stripped)

        if not m:
            out.append(line)
            i += 1
            continue

        marker = m.group(1)
        info = stripped[len(marker):].strip()

        if open_fence:
            # 外側フェンスの内側：閉じフェンス（同記号・同長以上・記号のみ）だけ反応
            if stripped == marker and marker[0] == open_fence[0] and len(marker) >= len(open_fence):
                open_fence = ''
            out.append(line)
            i += 1
            continue

        # ここはトップレベル
        named = re.match(r'^([\w+-]+):(.+)$', info)
        if marker[0] == '`' and named:
            # 本物のファイル名付きブロック → 同記号・同長以上の閉じフェンスまで収集
            language = named.group(1)
            filename = named.group(2).strip()
            code_lines = []
            i += 1
            while i < n:
                s2 = lines[i].strip()
                cm = re.match(r'^(`{3,}|~{3,})$', s2)
                if cm and s2[0] == marker[0] and len(s2) >= len(marker):
                    break
                code_lines.append(lines[i])
                i += 1
            idx = len(blocks)
            code = '\n'.join(code_lines) + '\n'
            blocks.append((language, filename, code))
            # markdownが触らないようなマーカーを残す
            out.append('')
            out.append(f'@@CODE_BLOCK_PLACEHOLDER_{idx}@@')
            out.append('')
            i += 1  # 閉じフェンス行をスキップ
            continue

        # 通常のフェンス開始（````markdown / ```python / ``` 等）→ 中身は触らない
        open_fence = marker
        out.append(line)
        i += 1

    return '\n'.join(out), blocks


def _render_code_block(language, filename, code):
    """ファイル名ラベル付きのコードブロックをHTML化する。"""
    from pygments import highlight
    from pygments.formatters import HtmlFormatter
    from pygments.lexers import get_lexer_by_name
    from pygments.util import ClassNotFound

    try:
        lexer = get_lexer_by_name(language, stripall=True)
    except ClassNotFound:
        lexer = get_lexer_by_name('text', stripall=True)

    formatter = HtmlFormatter(cssclass='codehilite', nowrap=False)
    highlighted = highlight(code, lexer, formatter)

    # ファイル名ラベル付きの構造で出力
    return (
        f'<div class="codehilite-wrap">'
        f'<div class="codehilite-filename">{escape(filename)}</div>'
        f'{highlighted}'
        f'</div>'
    )


@register.filter(name='markdownify')
def markdownify(value):
    """Markdown 文字列を HTML に変換する。

    使用拡張：
    - extra: テーブル・脚注などの追加記法
    - codehilite: コードブロックを Pygments でハイライト
    - toc: 目次の生成サポート
    - nl2br: 改行を <br> に変換
    """
    # Qiita風コードブロックを一旦取り出す
    text, named_blocks = _replace_named_code_blocks(value)

    # 通常のMarkdown変換
    html = md.markdown(
        text,
        extensions=['extra', 'codehilite', 'toc', 'nl2br'],
        extension_configs={
            'codehilite': {
                'css_class': 'codehilite',
                'linenums': False,
            },
        },
    )

    # 取り出したコードブロックを「ファイル名ラベル付き」で復元
    for idx, (language, filename, code) in enumerate(named_blocks):
        placeholder = f'@@CODE_BLOCK_PLACEHOLDER_{idx}@@'
        rendered = _render_code_block(language, filename, code)
        # markdownライブラリが <p>マーカー</p> に包んでしまう場合があるので両対応
        html = html.replace(f'<p>{placeholder}</p>', rendered)
        html = html.replace(placeholder, rendered)

    # bleach の allowlist でサニタイズしてから出力する（サニタイズ → mark_safe の順）
    return mark_safe(_sanitize_html(html))

# 見出し（h2 / h3）の id とテキストを拾う正規表現。
# toc 拡張が振ってくれた id="..." を使って目次のジャンプ先にする。
HEADING_PATTERN = re.compile(
    r'<h([23])\s+id="([^"]+)"[^>]*>(.*?)</h\1>',
    re.DOTALL,
)


@register.filter(name='extract_toc')
def extract_toc(rendered_html):
    """レンダリング済みHTMLから目次を抽出する。

    h2 を親、h3 を子としてネスト構造で返す。
    h2 / h3 が無い場合は空文字（目次不要のケース）。
    """
    items = []
    for match in HEADING_PATTERN.finditer(rendered_html):
        level = int(match.group(1))
        anchor = match.group(2)
        # タグを剥がして純粋なテキストだけ取り出す
        text = re.sub(r'<[^>]+>', '', match.group(3)).strip()
        items.append((level, anchor, text))

    if not items:
        return ''

    html_parts = ['<ul class="toc-list">']
    h2_open = False   # 直前 h2 の <li> が開いたまま？
    in_sub = False    # h3 用の <ul> が開いたまま？

    def close_current_h2():
        nonlocal h2_open, in_sub
        if in_sub:
            html_parts.append('</ul>')
            in_sub = False
        if h2_open:
            html_parts.append('</li>')
            h2_open = False

    for level, anchor, text in items:
        anchor_e = escape(anchor)
        text_e = escape(text)
        if level == 2:
            close_current_h2()
            html_parts.append(
                f'<li class="toc-item toc-h2">'
                f'<a href="#{anchor_e}" data-toc-anchor="{anchor_e}">{text_e}</a>'
            )
            h2_open = True
        elif level == 3:
            # h2 が無いまま h3 から始まる文書のために、ダミーで包む
            if not h2_open:
                html_parts.append('<li class="toc-item toc-h2 toc-orphan">')
                h2_open = True
            if not in_sub:
                html_parts.append('<ul class="toc-sublist">')
                in_sub = True
            html_parts.append(
                f'<li class="toc-item toc-h3">'
                f'<a href="#{anchor_e}" data-toc-anchor="{anchor_e}">{text_e}</a>'
                f'</li>'
            )

    close_current_h2()
    html_parts.append('</ul>')
    return mark_safe(''.join(html_parts))


def render_post_markdown(value):
    """記事本文用：Markdown → (body_html, toc_html) のタプルを返す。

    ビューから呼んで body と toc を別々のコンテキスト変数に入れる。
    1リクエストにつき1回だけ変換して、本文と目次の両方で使い回す。
    """
    body = markdownify(value)
    toc = extract_toc(body)
    return body, toc

from django.db.models import F
from django.shortcuts import get_object_or_404, render

from .models import Post
from .templatetags.markdown_tags import render_post_markdown


def detail(request, slug):
    """記事詳細ページを表示する。"""
    if request.user.is_authenticated and request.user.is_staff:
        post = get_object_or_404(Post, slug=slug)
    else:
        post = get_object_or_404(Post, slug=slug, is_published=True)

    # 閲覧数を1加算（F()でアトミックに）
    Post.objects.filter(pk=post.pk).update(view_count=F('view_count') + 1)

    # 前後の記事（第5章のロジックそのまま）
    prev_post = None
    next_post = None
    if post.published_at:
        prev_post = (
            Post.objects.filter(is_published=True, published_at__lt=post.published_at)
            .order_by('-published_at').first()
        )
        next_post = (
            Post.objects.filter(is_published=True, published_at__gt=post.published_at)
            .order_by('published_at').first()
        )

    # 関連記事（同カテゴリの最新3件）
    related_posts = []
    if post.category:
        related_posts = (
            Post.objects.filter(is_published=True, category=post.category)
            .exclude(pk=post.pk).order_by('-published_at')[:3]
        )

    # ★ここが今回の追加：本文HTMLと目次HTMLを1回の変換でまとめて取得
    body_html, toc_html = render_post_markdown(post.body)

    context = {
        'post': post,
        'body_html': body_html,
        'toc_html': toc_html,
        'prev_post': prev_post,
        'next_post': next_post,
        'related_posts': related_posts,
    }
    return render(request, 'blog/detail.html', context)

/* ============================================================
   ここから下は手書きで追記（Pygments生成分の下に足す）
   ============================================================ */

/* ファイル名ラベル付きコードブロック全体のラッパー */
.codehilite-wrap {
    margin-bottom: 1rem;
    border-radius: 6px;
    overflow: hidden;
    background: #272822;
}

/* ファイル名ラベル */
.codehilite-filename {
    background: #1a1a1a;
    color: #c0c0c0;
    padding: 6px 14px;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 0.8rem;
    border-bottom: 1px solid #3a3a3a;
}

/* ラッパー内の codehilite はラウンドを取り除く（外側のラッパーが担当） */
.codehilite-wrap .codehilite {
    border-radius: 0;
    margin-bottom: 0;
}

/* コードブロック本体 */
.codehilite {
    background: #272822;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
    overflow-x: auto;
}

.codehilite pre {
    margin: 0;
    color: #f8f8f2;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* インラインコード（コードブロック内のものは除く） */
.blog-post-body code:not(.codehilite code) {
    background: #f5f5f5;
    padding: 0.15em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
    color: #d63384;
}

/* テーブル：境界線とヘッダ背景 */
.blog-post-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2rem 0;
}

.blog-post-body table th,
.blog-post-body table td {
    padding: 0.5rem 0.75rem;
    border: 1px solid #374151;
}

.blog-post-body table th {
    background-color: #1f2937;
    color: #f3f4f6;
}

from .models import Category, Post


def _common_context():
    """全ページ共通のコンテキスト（サイドバー用）を返す。"""
    return {
        # よく読まれている記事（閲覧数の多い順で3件）
        'popular_posts': (
            Post.objects.filter(is_published=True).order_by('-view_count')[:3]
        ),
        # カテゴリ一覧
        'categories': Category.objects.all(),
    }

context = {
        'post': post,
        'body_html': body_html,
        'toc_html': toc_html,
        'prev_post': prev_post,
        'next_post': next_post,
        'related_posts': related_posts,
        **_common_context(),   # ← サイドバー用（人気記事・カテゴリ）を追加
    }
    return render(request, 'blog/detail.html', context)

.post-toc {
    font-size: 0.875rem;
}
.post-toc-nav ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    border-left: 2px solid #e5e7eb;
}
.post-toc-nav .toc-sublist {
    padding-left: 0.5rem;
    margin: 0.25rem 0;
    border-left: 2px solid #f3f4f6;
}
.post-toc-nav li { margin: 0; line-height: 1.4; }
.post-toc-nav a {
    color: #6b7280;
    text-decoration: none;
    display: block;
    padding: 0.3rem 0 0.3rem 0.75rem;
    border-left: 2px solid transparent;
    margin-left: -2px;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
    word-break: break-word;
}
.post-toc-nav a:hover { color: #1f2937; background-color: #f9fafb; }
.post-toc-nav a.toc-active {
    color: #2563eb;
    border-left-color: #2563eb;
    font-weight: 600;
}
.post-toc-nav .toc-h3 a { font-size: 0.825rem; color: #9ca3af; }

/**
 * 記事詳細ページの目次（TOC）アクティブハイライト
 *
 * IntersectionObserver で本文中の h2/h3 を監視し、
 * 現在ビューポートに入っている見出しに対応する目次リンクを強調表示する。
 */
(function () {
    'use strict';

    function init() {
        const tocLinks = document.querySelectorAll('.post-toc-nav a[data-toc-anchor]');
        if (tocLinks.length === 0) return;

        // anchor -> link 要素の対応表
        const linkMap = {};
        tocLinks.forEach(function (a) {
            linkMap[a.dataset.tocAnchor] = a;
        });

        // 本文中の対象見出しを集める
        const headings = Object.keys(linkMap)
            .map(function (id) { return document.getElementById(id); })
            .filter(function (el) { return el !== null; });
        if (headings.length === 0) return;

        const visibleIds = new Set();

        function updateActive() {
            let activeId = null;
            for (let i = 0; i < headings.length; i++) {
                if (visibleIds.has(headings[i].id)) {
                    activeId = headings[i].id;
                    break;
                }
            }
            tocLinks.forEach(function (a) { a.classList.remove('toc-active'); });
            if (activeId && linkMap[activeId]) {
                linkMap[activeId].classList.add('toc-active');
            }
        }

        const observer = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    visibleIds.add(entry.target.id);
                } else {
                    visibleIds.delete(entry.target.id);
                }
            });
            updateActive();
        }, {
            // 画面上部 80px ～ 下部 60% を「読んでる範囲」とみなす
            rootMargin: '-80px 0px -60% 0px',
            threshold: 0,
        });

        headings.forEach(function (h) { observer.observe(h); });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();