幻灯片制作

screen shot 2017-07-14 at 12 33 14 pm

Markdown Preview Enhanced 使用 reveal.js 来渲染漂亮的幻灯片。

点击这里 查看相关的介绍。

presentation

Presentation Front-Matter

你可以通过 front-matter 来设置你的幻灯片。
你需要将你的设置写在 presentation 部分下。
例如： 

  1. ---
  2. presentation:
  3.   width: 800
  4.   height: 600
  5. ---
  7. <!-- slide -->
  8. 在这里编写你的幻灯片。。。

这个幻灯片将会拥有 800x600 的大小。

设置

  1. ---
  2. presentation:
  3.   # The "normal" size of the presentation, aspect ratio will be preserved
  4.   # when the presentation is scaled to fit different resolutions. Can be
  5.   # specified using percentage units.
  6.   width: 960
  7.   height: 700
  9.   # Factor of the display size that should remain empty around the content
  10.   margin: 0.1
  12.   # Bounds for smallest/largest possible scale to apply to content
  13.   minScale: 0.2
  14.   maxScale: 1.5
  16.   # Display controls in the bottom right corner
  17.   controls: true
  19.   # Display a presentation progress bar
  20.   progress: true
  22.   # Display the page number of the current slide
  23.   slideNumber: false
  25.   # Push each slide change to the browser history
  26.   history: false
  28.   # Enable keyboard shortcuts for navigation
  29.   keyboard: true
  31.   # Enable the slide overview mode
  32.   overview: true
  34.   # Vertical centering of slides
  35.   center: true
  37.   # Enables touch navigation on devices with touch input
  38.   touch: true
  40.   # Loop the presentation
  41.   loop: false
  43.   # Change the presentation direction to be RTL
  44.   rtl: false
  46.   # Randomizes the order of slides each time the presentation loads
  47.   shuffle: false
  49.   # Turns fragments on and off globally
  50.   fragments: true
  52.   # Flags if the presentation is running in an embedded mode,
  53.   # i.e. contained within a limited portion of the screen
  54.   embedded: false
  56.   # Flags if we should show a help overlay when the questionmark
  57.   # key is pressed
  58.   help: true
  60.   # Flags if speaker notes should be visible to all viewers
  61.   showNotes: false
  63.   # Number of milliseconds between automatically proceeding to the
  64.   # next slide, disabled when set to 0, this value can be overwritten
  65.   # by using a data-autoslide attribute on your slides
  66.   autoSlide: 0
  68.   # Stop auto-sliding after user input
  69.   autoSlideStoppable: true
  71.   # Enable slide navigation via mouse wheel
  72.   mouseWheel: false
  74.   # Hides the address bar on mobile devices
  75.   hideAddressBar: true
  77.   # Opens links in an iframe preview overlay
  78.   previewLinks: false
  80.   # Transition style
  81.   transition: 'default' # none/fade/slide/convex/concave/zoom
  83.   # Transition speed
  84.   transitionSpeed: 'default' # default/fast/slow
  86.   # Transition style for full page slide backgrounds
  87.   backgroundTransition: 'default' # none/fade/slide/convex/concave/zoom
  89.   # Number of slides away from the current that are visible
  90.   viewDistance: 3
  92.   # Parallax background image
  93.   parallaxBackgroundImage: '' # e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"
  95.   # Parallax background size
  96.   parallaxBackgroundSize: '' # CSS syntax, e.g. "2100px 900px"
  98.   # Number of pixels to move the parallax background per slide
  99.   # - Calculated automatically unless specified
  100.   # - Set to 0 to disable movement along an axis
  101.   parallaxBackgroundHorizontal: null
  102.   parallaxBackgroundVertical: null
  104.   # Parallax background image
  105.   parallaxBackgroundImage: '' # e.g. "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg"
  107.   # Parallax background size
  108.   parallaxBackgroundSize: '' # CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto)
  110.   # Number of pixels to move the parallax background per slide
  111.   # - Calculated automatically unless specified
  112.   # - Set to 0 to disable movement along an axis
  113.   parallaxBackgroundHorizontal: 200
  114.   parallaxBackgroundVertical: 50
  116.   # Enable Speake Notes
  117.   enableSpeakerNotes: false
  118. ---

自定义幻灯片样式

你可以添加 id 以及 class 到一个特定的幻灯片： 

  1. <!-- slide id="my-id" class="my-class1 my-class2" -->

或者你也可以自定义第 nth 个幻灯片，编写你的 less 如下：

  1. .markdown-preview.markdown-preview {
  2.   // 自定义 presentation 样式
  3.   .reveal .slides {
  4.     // 修改所有幻灯片
  5.   }
  7.   // 自定义 presentation 样式
  8.   .slides > section:nth-child(1) {
  9.     // 修改 `第 1 个幻灯片`
  10.   }
  11. }

➔ Pandoc