gwd
/
math_cms


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
							{{-- 知识点讲解模板 --}}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>知识点讲解</title>
    <link rel="stylesheet" href="/css/katex/katex.min.css">
    @include('pdf.partials.kp-explain-styles')
</head>
<body>
    <div class="page">
        <div class="kp-explain-header">
            <div class="kp-explain-title">知识点讲解</div>
            <div class="kp-explain-subtitle">本章节用于梳理本卷涉及的知识点，帮助学生在做题前完成预习/复盘。</div>
        </div>

        @if(empty($knowledgePoints))
            <div class="kp-empty">暂无知识点数据</div>
        @else
            <div class="kp-list">
                @foreach($knowledgePoints as $index => $kp)
                    <div class="kp-section">
                        <div class="kp-section-head">
                            <div class="kp-section-name">{{ $loop->iteration }}、{{ $kp['kp_name'] ?? ($kp['kp_code'] ?? '未命名知识点') }}</div>
                        </div>
                        <div class="kp-section-body">
                            @if(!empty($kp['explanation']))
                                {{-- 隐藏容器存储原始 Markdown --}}
                                <div class="kp-markdown-source" style="display:none;">{!! $kp['explanation'] !!}</div>
                                {{-- 渲染容器 --}}
                                <div class="kp-markdown-container kp-markdown-content"></div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    {{-- 引入脚本 --}}
    <script src="/js/markdown-it.min.js"></script>
    <script src="/js/katex.min.js"></script>

    <script>
    (function() {
        'use strict';

        function waitForLibs(callback) {
            let attempts = 0;
            const maxAttempts = 50;
            const interval = setInterval(function() {
                attempts++;
                if (typeof window.markdownit === 'function') {
                    clearInterval(interval);
                    callback();
                } else if (attempts >= maxAttempts) {
                    clearInterval(interval);
                    console.error('[Render] Libraries failed to load after', maxAttempts, 'attempts');
                    console.log('[Render] markdownit:', typeof window.markdownit);
                    callback();
                }
            }, 100);
        }

        function renderMarkdown(md, targetEl) {
            if (!md) return;

            if (typeof window.markdownit !== 'function') {
                targetEl.textContent = md;
                return;
            }

            const mdParser = window.markdownit({
                html: false,
                breaks: false,
                linkify: true,
                typographer: false
            });

            let html = mdParser.render(md);

            if (typeof window.katex !== 'undefined') {
                const katexOptions = {
                    throwOnError: false,
                    displayMode: false
                };

                function decodeEntities(input) {
                    return input
                        .replace(/&gt;/g, '>')
                        .replace(/&lt;/g, '<')
                        .replace(/&amp;/g, '&')
                        .replace(/&quot;/g, '"')
                        .replace(/&#39;/g, "'");
                }

                // 先渲染块级公式 $$...$$
                html = html.replace(/\$\$([\s\S]*?)\$\$/g, function(_, tex) {
                    try {
                        const cleaned = decodeEntities(tex.trim());
                        return window.katex.renderToString(cleaned, { ...katexOptions, displayMode: true });
                    } catch (e) {
                        return '<span style="color:red">[KaTeX error]</span>';
                    }
                });

                // 再渲染行内公式 $...$
                html = html.replace(/\$([^\$\n]+?)\$/g, function(_, tex) {
                    try {
                        const cleaned = decodeEntities(tex.trim());
                        return window.katex.renderToString(cleaned, { ...katexOptions, displayMode: false });
                    } catch (e) {
                        return '<span style="color:red">[KaTeX error]</span>';
                    }
                });
            }

            targetEl.innerHTML = html;
        }

        function renderAll() {
            const containers = document.querySelectorAll('.kp-markdown-container');
            containers.forEach((container) => {
                const sourceEl = container.previousElementSibling;
                let markdown = '';
                if (sourceEl && sourceEl.classList.contains('kp-markdown-source')) {
                    markdown = sourceEl.textContent.trim();
                }
                if (!markdown) return;
                renderMarkdown(markdown, container);
            });
        }

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

        document.addEventListener('livewire:initialized', function() {
            waitForLibs(renderAll);
        });
        document.addEventListener('livewire:navigated', () => setTimeout(function() {
            waitForLibs(renderAll);
        }, 100));
    })();
    </script>
</body>
</html>