codecamp

第06节 Markdown分割演示

为什么这个时候动手制作这个功能

  2016年7月份,我在 OsChina 网站上看到了一个名为 Marp 的跨操作系统平台软件,可以用 Markdown 快速书写幻灯片演示文稿(当时它已经是 0.8 版了)。恰好这个功能也是我考虑了好久都没敢动手的功能——因为要考虑的东西太多,很难想出一个满意的办法。

但是受 Marp 的刺激,我决定还是立即动手开发用 Markdown 来快速制作幻灯片的功能——因为这个功能本身对我的工作很有用。而 Marp 并没有解决有些我认为很困难的问题(例如如何控制页面内容使之自适应幻灯片尺寸)——这使我豁然开朗,终于想明白有些问题完全可以交给用户去处理。

LME 的演示功能与 Marp 的区别

  LME 的演示功能虽然是受 Marp 的影响才动手制作的,但与 Marp 终究有不同:我在开发时更多地考虑了 LME 本身的特点(而不是一味模仿 Marp)。基本上,LME 的演示功能只有一点与 Marp 是一致的:可以用水平线来分割各页幻灯片。

  LME 中用于分割幻灯片的水平线与 Marp 并不完全相同,而且 LME 不只水平线这一种分割方式。

  相比于 Marp,LME 的不同在于:

  • Marp 以水平线来分割 Markdown 文档

  LME 虽然也支持以水平线分割,但内容的实现方式与 Marp 完全不同。而且 LME 还支持其它方式演示。

  • Marp 可以导出为 PDF

  LME 仅仅是将 Markdown 文档切分,然后仍然是以 Html 网页的形式演示,所以和编译后的 Html 效果完全一样。

  LME 并不支持将幻灯片导出为 PDF 文档,但可以直接复制 Html 网页的内容——粘贴到 Word 这样的软件中——然后就是想怎么编辑就怎么编辑了。

  • Marp 和 LME 的主题实现方式并不相同

  我在 Marp 程序运行目录中并没有找到 css 文件,估计是打包起来了。所有制作的幻灯片都只能使用 Marp 内置的主题。

  LME 主题使用的 css 文件在每个工作区目录下都有——这样只要用户懂 css,完全可以使每个工作区都有不一样的主题,自由度很大。

  • Marp 支持设置屏幕宽、高比例

  LME 则直接采用演示窗口全屏的办法来解决问题——用户只需要按住Ctrl并滚动鼠标滚轮就可以缩放到合适的尺寸。

  • Marp 不支持设置字体

  LME 同样不支持演示时设置字体,但用户如果懂 css,完全可以自行修改工作区下的 css 文件来达到更改字体设置的目的。

  • Marp 支持实时预览

  你可以一边编辑 Markdown 文档,一边看到当前页面在作为幻灯片演示时的效果。

  LME 不支持这一功能,因为比例尺较难换算,用户需要自己在使用中摸索多少内容比较适合作为一页。

  还需要结合演示界面的缩放功能(按住Ctrl并滚动鼠标滚轮)。

如何调整演示界面缩放比例?

  演示界面其实是用浏览器实现的,所以按住键盘上的Ctrl键,然后滚动鼠标滚轮即可缩放。

LME 支持三种切分为幻灯片的方式

  • 按折叠区演示,只演示折叠区内部的内容

  而且只支持一层折叠区。每个一级折叠区都会被当作一张幻灯片。

  如果要演示折叠区本身,请在折叠区外再套一个自定义折叠区标识符。这样,外部的自定义折叠区标识符就会被当作幻灯片分界定义,而内部的折叠区则还是折叠区。

  • 按一级标题来演示

  不演示第一个一级标题前的任何内容。

  演示每个一级标题及其后跟随的内容——直到找到下一个一级标题为止。

  • 按水平线分割演示

  按水平线将文档分割成几份,每份为一张幻灯片。

  水平线分割演示可能出现空幻灯片。

应该用哪种演示方式?

  这三种演示方式中,按折叠区演示时演示的内容最少,按水平线分割时演示的内容最多。通常一个文档不能同时支持这三种演示模式,用户应根据需要选择使用。

  注意:这三种演示模式是相互冲突的,一个 Markdown 文件不可能同时对这三种演示方式提供良好的支持。所以一开始就应该仔细考虑使用哪种演示模式。

怎么定义默认的演示方式?

  可以在 Markdown 文档中定义默认的演示规则,这样只需要按下Ctrl+F5即可,不需要再到菜单里一层层去找对应的菜单项了。

  在文档中定义演示方式,语法基本上类似这样:

;PM:#
;PM:-
;PM:{

当一个文档中出现多行这样的定义时,只有第一个有效。

  所以通常把它写在文件中靠近头部的位置。

  其中表示这行是注释,不会被编译。PM:表示这个注释用于指定演示方式。#-{用来指示具体哪种演示方式。

  如果省略具体的演示方式指示文本,则会被当作按一级标题来演示:

;PM:

  在具体的演示方式指示符后面,可以添加任意文本,它们是注释,不起其它任何作用。

  例如:

;PM:{从这里开始任意文本都可以

  这行实际上定义当前文档应以自定义折叠区的方式演示。

有没有其它写法?

  有的,写成下面这样也可以:

;演示:{

  写成下面这样还可以:

;演示模式:{

还可以只演示标题

  有些时候,已经编写好的 Markdown 文档内容很多,又只需要向观众展示文档的基本结构——此时可以使用“只演示标题”这一演示方式。

  在这种方式下,其实仍然是使用按一级标题分割演示这个模式,只不过它会忽略除标题以外的所有内容而已。

自动编号为什么不见了?

  只有在使用一级标题作为演示切分标准时才能保证自动编号不出错。所以,除非使用一级标题的演示模式,否则即使开启了 Html 编译选项中的“<H1>-<H6>自动编号”也不会在演示时显示自动编号。


  可以将下列文本复制、粘贴到 LME 的某个活动编辑器中,保存后再点击主界面视图演示为幻灯片菜单项下的某个子项来进行演示。

%三种幻灯片演示模式的区别示例
region i { 秦朝专制主义中央集权政制
|       秦的政治制度       |
|==========================|
|中央              |地方  |
|:-----------------|:-----|
|三公九卿制、皇帝制|郡县制|
} region 
---
;第02页幻灯片:
#秦的三公九卿制
##三公制
秦实际上并不实行传统的“三公”官制,汉代儒学兴盛,将秦汉时期的“丞相、御史大夫、太尉”附会称为“三公”——实际上秦丞相设左、右二员。
+ 丞相,百官之长,掌理行政
+ 御史大夫,副相,掌监察百官、群臣章奏
+ 太尉,掌军务,“虚其位、不设其人”
##九卿
“九卿”亦是附会的说法,秦汉实指“列卿”,不止九个官职。
---
;第03页幻灯片:
#秦的地方政制
秦总结春秋战国以来政制得失,全面推广郡县制。
秦的地方行政区划制度主要是:
+ 全国分郡、县二级,一郡下辖数县
+ 县下设基层行政组织乡、里
+ 乡、里之间设亭为治安区
+ 郡县长官均由皇帝任命
:最后这条尤为重要,反映了秦朝官僚政治取代贵族政治,是中央集权制形成的重要表现。

第05节 Markdown创建、打包 CHM 文件
第01节 Markdown标题
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }