快速入手Web幻灯片制作

在线幻灯片

使用markdown可以快速的写出优美的文档,接下来我介绍一些简单的语法,快速的用浏览器制作幻灯片。

最基本使用格式

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<style>
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic); body { font-family: 'Droid Serif'; }
h1, h2, h3 {
font-family: 'Yanone Kaffeesatz';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
</head>
<body>
<textarea id="source"> class: center, middle # Title --- # Agenda 1. Introduction
2. Deep-dive
3. ... --- # Introduction </textarea>
<script src="https://gnab.github.io/remark/downloads/remark-latest.min.js">
</script>
<script>
var slideshow = remark.create();
</script>
</body>
</html>

播放

用浏览器打开幻灯片,按键盘h参考提示。

格式

分页

例子:

# Slide 1
This is slide 1
---
# Slide 2
This is slide 2

页面对齐控制

类名 属性
center 文字左右居中
middle 文字上下居中
right 内容靠右
left 内容靠左
top 内容靠上
bottom 内容靠下

例子:

class: center, middle
#### 页面正*
---
class: left, top #### 左上角(默认也是左上角)
---
class: center, top #### 页面上方正*
---
class: right, top #### 页面右上角
---
class: left, middle #### 页面左边,纵向中间
---
class: right, middle #### 页面右边,纵向中间
---
class: left, bottom #### 页面左下角
---
class: center, bottom #### 页面中间底部
---
class: right, bottom #### 页面右下角
---

文字对齐和颜色

只能控制一段文字的对齐方式,对齐方式右三种,左对齐,居中,右对齐

# 文字对齐

.left[左对齐]

.center[居中]

.right[右对齐]

.red.right[右对齐]

图片

一般图片使用

# Images

![Default-aligned image](image.jpg)

.right[![Right-aligned image](image.jpg)]

背景图片是幻灯片页面的属性,放在标题上方

background-image: url(image.jpg)

# Slide with background image

页面间跳转(超链接)

首先需要为每个页面定义属性name,当需要跳转到某一页时,使用markdown语法的超链接,目标页面为#+name

例子:

name: abc
# Slide - bullet 1
- bullet 2 --- # Slide
Some content.
[the abc](#abc)

注释

一行三个问号,如下

# 注释
Some content. ???
下面是一些注释

继承某一页的内容

使用templace属性,属性值为要衔接的页面的name,如果同时衔接某一个页面,则会出现一次替换的效果。

name: 第一张
###Some content. ---
先插一句话
---
name: 第二张
template: 第一张
第二张幻灯片的内容
---
template: 第二张
Content appended to other-slide's content1.
---
template: 第二张
Content appended to other-slide's content2.
---

在一页上依次显示内容

鼠标点击后接着上一页的内容继续显示,用两个横线表示。

例子:

# 在一页上依次显示内容
--
1. 第一条记录 --
2. 第二条记录
--
3. 第三点内容

控制是否显示页面数量角标

页面属性count,ture or false

count: false

* This slide will not be counted.

一般设置

 var slideshow = remark.create({
// Default: '4:3'
ratio: '4:3',
// ratio: '4:3','16:9',控制幻灯片比例 // 导航选项
navigation: {
// 是否允许滚动
// Default: true
// Alternatives: false
scroll: true, // 是否允许触控
// Default: true
// Alternatives: false
touch: true, // 是否允许点击
// Default: false
// Alternatives: true
click: false
}, // 定制页面角标
slideNumberFormat: 'Slide %current% of %total%',
// .. or by using a format function
slideNumberFormat: function (current, total) {
return 'Slide ' + current + ' of ' + total;
}, // Enable or disable counting of incremental slides in the slide counting
countIncrementalSlides: true
});

代码高亮显示

需要配置这些属性

  • highlightLanguage

  • Set default language for syntax highlighting

  • Default: - (no highlighting)

  • Alternatives: javascript, ruby, python, ... (see available language definitions for Highlight.js)

  • To disable automatic highlighting, use no-highlight

  • highlightStyle

  • Set highlight style for syntax highlighting

  • Default: default

  • Alternatives: arta, ascetic, dark, default, far, github, googlecode, idea, ir_black, magula, monokai, rainbow, solarized-dark, solarized-light, sunburst, tomorrow, tomorrow-night-blue, tomorrow-night-bright, tomorrow-night, tomorrow-night-eighties, vs, zenburn.

  • highlightLines

  • Highlight background of code lines prefixed with *

  • Default: false

  • Alternatives: true, false

  • highlightSpans

  • Highlight background of code spans defined by the content between backticks

  • Default: false

  • Alternatives: true, false

    例子:

var slideshow = remark.create({
highlightLanguage: 'javascript',
highlightStyle: 'monokai',
...
});

导航配置

可能会用到的一些导航配置

// Navigate to the beginning and end of the slideshow
slideshow.gotoFirstSlide();
slideshow.gotoLastSlide(); // Navigate a single slide forward and backward
slideshow.gotoNextSlide();
slideshow.gotoPreviousSlide(); // Navigate to a specific slide, either by slide number or name
slideshow.gotoSlide(5);
slideshow.gotoSlide('agenda'); // Suspend/resume remarks process of keyboard and touch events for custom builds, etc...
slideshow.pause();
slideshow.resume();

幻灯片自动播放

var slideshow = remark.create();

// every 8 seconds (change to your desired interval), fire the helper function
setInterval(function () {carousel(slideshow)}, 8000); function carousel(varObject) {
var slideCount = varObject.getSlideCount()-1;
var currentSlide = varObject.getCurrentSlideIndex();
// if the slideshow is on the last slide, go back to the first slide; if not, call gotoNextSlide();
if (currentSlide == slideCount) {
varObject.gotoFirstSlide();
}
else { varObject.gotoNextSlide(); }
}
上一篇:Axure自动幻灯片制作


下一篇:固态存储行业领导者硅格半导体加入龙蜥社区,共同推动开源生态建设