Paperless 仓库中的 reveal.js Markdown 幻灯片：example.md 演示文件与插件源码机制剖析

后端OCR企业应用【免费下载链接】paperlessScan, index, and archive all of your paper documents项目地址https://gitcode.com/gh_mirrors/pa/paperless点击查看免费下载本篇指南以presentation/plugin/markdown/example.md及其配套的example.html演示页面为核心系统讲解 Paperless 仓库自带 reveal.js 演示中如何用纯 Markdown 组织幻灯片外部 Markdown 资源加载、水平/垂直分隔符规则、内联模板与自定义分隔符、幻灯片属性与元素属性等全部用法并深入markdown.js、marked.js源码揭示底层解析流程。读完本文你将掌握在 presentation/index.html 这类 reveal.js 演示中直接复用 Markdown 写幻灯片、自定义切分规则与属性注入的完整实战方案。一、定位这份 example.md 是什么presentation/plugin/markdown/example.md是 reveal.js Markdown 插件的官方示例数据文件共 31 行内容非常精简# Markdown Demo ## External 1.1 Content 1.1 Note: This will only appear in the speaker notes window. ## External 1.2 Content 1.2 ## External 2 Content 2.1 ## External 3.1 Content 3.1 ## External 3.2 Content 3.2它并不直接对应 Paperless 的业务功能而是插件自带的外部 Markdown 资源演示样本幻灯片内容存放在独立的 .md 文件中由 HTML 页面通过data-markdown属性以 XHR 异步拉取并切分为多张幻灯片。这是 Paperless 仓库自带的 reveal.js 演示框架见 presentation/README.md其中说明演示由 reveal.js 编写、无需特殊软件、直接打开index.html即可观看中用 Markdown 写演示的最佳范例。注意文件中的Note: This will only appear in the speaker notes window.一行——它演示的是**演讲者备注speaker notes**的写法插件会将其从幻灯片正文中剥离仅渲染进备注窗口具体机制见第七节的createMarkdownSlide源码分析。二、example.html四种 Markdown 幻灯片形态与 example.md 配套的 presentation/plugin/markdown/example.html 是一个完整的 reveal.js 演示页它在一个页面里集中展示了插件的四种典型用法这也正是 example.md 被引用的上下文。页面加载插件的方式位于文件尾部script src../../lib/js/head.min.js/script script src../../js/reveal.js/script script Reveal.initialize({ controls: true, progress: true, history: true, center: true, dependencies: [ { src: ../../lib/js/classList.js, condition: function() { return !document.body.classList; } }, { src: marked.js, condition: function() { return !!document.querySelector( [data-markdown] ); } }, { src: markdown.js, condition: function() { return !!document.querySelector( [data-markdown] ); } }, { src: ../highlight/highlight.js, async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, { src: ../notes/notes.js } ] }); /script关键点marked.js与markdown.js均带condition条件——只有当页面中存在[data-markdown]元素时才加载避免无 Markdown 内容的演示引入额外开销。形态一外部 Markdown 文件本例核心!-- Use external markdown resource, separate slides by three newlines; vertical slides by two newlines -- section>section>!-- Slides are separated by newline three dashes newline, vertical slides identical but two dashes -- section>!-- No extra slides, since there are no separators defined (so theyll become horizontal rulers) -- section>var DEFAULT_SLIDE_SEPARATOR ^\n---\n$, DEFAULT_NOTES_SEPARATOR note:, DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR \\\.element\\\s*?(.?)$, DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR \\\.slide:\\\s*?(\\\S.?)$;即未显式声明data-separator时默认以独立的---行切分水平幻灯片备注默认以note:开头元素属性与幻灯片属性分别通过!-- .element: ... --与!-- .slide: ... --注释注入。getSlidifyOptions函数markdown.js负责补齐这些默认值function getSlidifyOptions( options ) { options options || {}; options.separator options.separator || DEFAULT_SLIDE_SEPARATOR; options.notesSeparator options.notesSeparator || DEFAULT_NOTES_SEPARATOR; options.attributes options.attributes || ; return options; }四、幻灯片属性与元素属性在 Markdown 里写 HTML 属性example.html 中还演示了两种用注释语法注入属性的高级用法这也是 Markdown 无法直接表达 HTML 属性时的标准解决方案。幻灯片级属性slide attributessection>section>section>if( typeof hljs ! undefined ) { marked.setOptions({ highlight: function( lang, code ) { return hljs.highlightAuto( lang, code ).value; } }); }这意味着 Markdown 中的围栏代码块fenced code block如php会先经 marked 解析出语言标签再由 highlight.js 按语言自动高亮最终以带classlang-php的precode输出。六、源码剖析markdown.js 的三阶段管线presentation/plugin/markdown/markdown.js 全文件 393 行其公开 API 为{ initialize, processSlides, convertSlides, slidify }模块加载后立即执行root.RevealMarkdown.initialize()。整个处理流程分三个阶段阶段一processSlides —— 加载外部文件并切分processSlidesmarkdown.js遍历所有[data-markdown]元素分三种情况处理data-markdown带路径用XMLHttpRequest同步xhr.open(GET, url, false)拉取外部 Markdown 文件然后调用slidify按data-separator、data-separator-vertical、data-separator-notes切分。针对file://协议本地调试场景判断条件放宽为( xhr.status 200 xhr.status 300 ) || xhr.status 0源码注释明确说明 file 协议返回状态码 0便于本地与移动端调试请求失败时输出一个data-statealert的错误幻灯片并提示需要从 HTTP 服务器提供演示页面。data-charset属性可通过xhr.overrideMimeType(text/html; charset datacharset)指定拉取文件的字符集。data-markdown无路径但定义了分隔符读取script typetext/template内联内容后同样交给slidify切分。两者都没有仅把内联内容包装为单张幻灯片模板。阶段二slidify —— 分隔符驱动的切片器slidifymarkdown.js是理解 example.md 切分结果的核心。它将水平与垂直分隔符拼接成一个正则new RegExp( options.separator ( options.verticalSeparator ? | options.verticalSeparator : ), mg )逐段迭代命中水平分隔符时把当前块压入水平栈sectionStack.push( content )命中垂直分隔符时先把后续内容放入一个新的垂直栈数组sectionStack.push( [] )再向该数组追加子块处理完所有分隔符后剩余内容追加到当前方向的栈中最后扁平化生成嵌套的section>section.innerHTML marked( markdown ); addAttributes( section, section, null, ... );它用data-markdown-parsed属性保证每张幻灯片只解析一次渲染前取出aside.notes备注节点渲染完成后再重新挂回避免被innerHTML覆盖。至此external 的 Markdownexample.md与内联模板都统一走切分 → marked 渲染 → 属性注入管线。七、备注剥离example.md 中 Note: 行的去向example.md 第 9 行Note: This will only appear in the speaker notes window.的处理逻辑在createMarkdownSlidemarkdown.jsvar notesMatch content.split( new RegExp( options.notesSeparator, mgi ) ); if( notesMatch.length 2 ) { content notesMatch[0] aside classnotes>dependencies: [ { src: lib/js/classList.js, condition: function() { return !document.body.classList; } }, { src: plugin/markdown/marked.js, condition: function() { return !!document.querySelector( [data-markdown] ); } }, { src: plugin/markdown/markdown.js, condition: function() { return !!document.querySelector( [data-markdown] ); } }, { src: plugin/highlight/highlight.js, async: true, condition: function() { return !!document.querySelector( pre code ); }, callback: function() { hljs.initHighlightingOnLoad(); } }, { src: plugin/zoom-js/zoom.js, async: true }, { src: plugin/notes/notes.js, async: true } ]并启用了controls、progress、history、center、transition: convex、backgroundTransition: zoom、loop: true等 reveal.js 全局配置配合 css/theme/league.css 主题、lib/css/zenburn.css 代码高亮主题及打印样式window.location.search.match(/print-pdf/gi)时切换为 css/print/pdf.css。该演示的幻灯片以原生sectionHTML 编写而 example.html example.md 则示范了同一框架下纯 Markdown 驱动的替代路径——两者共享同一套Reveal.initialize依赖装配方式。九、运行方式与注意事项打开presentation/plugin/markdown/example.html即可看到 example.md 被切分渲染后的演示效果仓库根演示则是打开 presentation/index.html。务必通过 HTTP 服务器访问外部 Markdown 依赖 XHR 拉取file://协议下虽然源码对状态码 0 做了兼容但浏览器同源策略仍可能拦截官方错误提示也明确要求serve the presentation HTML from a HTTP server。可在仓库目录执行python3 -m http.server后经浏览器访问。分隔符是正则表达式^\n\n\n表示行首 三个换行书写时注意转义与多行匹配语义若自定义分隔符无法命中预期位置应优先检查正则本身。内联模板必须放在script typetext/template中否则会被浏览器当作普通 HTML 解析而丢失 Markdown 原文。十、小结presentation/plugin/markdown/example.md虽只是 31 行的演示数据但它完整串联了 reveal.js Markdown 插件的外部资源加载、双分隔符切片、演讲者备注、属性注入与代码高亮等全部能力。结合 example.html、markdown.js 与 marked.js 的源码你可以清晰复现Markdown → 切片 → marked 渲染 → 属性注入 → 备注剥离的完整链路并在 Paperless 仓库的演示框架内直接复用这套纯 Markdown 写幻灯片的方案。赞分享后端OCR企业应用【免费下载链接】paperlessScan, index, and archive all of your paper documents项目地址https://gitcode.com/gh_mirrors/pa/paperless点击查看免费下载相关推荐Paperless 演示幻灯片presentation目录解析基于 reveal.js 的零依赖项目演示与部署Paperless 演示幻灯片presentation目录解析基于 reveal.js 的零依赖项目演示与部署 本篇技术指南围绕 paperless 仓库后端OCR企业应用CodiMD 幻灯片模式实战指南用 Markdown 与 reveal.js 打造可演示、可打印的幻灯片CodiMD 幻灯片模式实战指南用 Markdown 与 reveal.js 打造可演示、可打印的幻灯片 CodiMD实时协作 Markdown 笔记内置后端协同办公知识库WebSocketPython-pty-shells核心原理解析为什么PTY比普通shell更强大Python pty shells核心原理解析为什么PTY比普通shell更强大 python pty shells是一个专注于提供完整PTY伪终端功能上一篇终极指南如何使用ofd.js纯前端轻松处理OFD文档下一篇Umi-OCR终极指南免费离线文字识别软件的完整使用教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考