在线幻灯片

使用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---# Agenda1. 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: falsescroll: true,// 是否允许触控// Default: true// Alternatives: falsetouch: true,// 是否允许点击// Default: false// Alternatives: trueclick: false},// 定制页面角标slideNumberFormat: 'Slide %current% of %total%',// .. or by using a format functionslideNumberFormat: function (current, total) {return 'Slide ' + current + ' of ' + total;},// Enable or disable counting of incremental slides in the slide countingcountIncrementalSlides: 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(); }}

快速入手Web幻灯片制作相关推荐

Maven初探-如何快速入手一个项目
这已是一个工具的时代,而不是一个到处搜集JAR的年代,如果还在为搭建一个项目而到处找依赖,那你就彻底OUT了.下面,跟各位一起重温学习下Maven. 什么是Maven Maven项目对象模型(POM) ...
使用Spring Boot和MongoDB快速进行Web应用原型设计
回到我以前的项目之一,我被要求制作一些应急申请. 时间表紧张,范围简单. 内部编码标准是PHP,因此尝试建立经典的Java EE堆栈将是一个真正的挑战. 而且,说实话,完全过大了. 那怎么办我趁机尝 ...
spring boot web项目_阿里技术专家带你使用Spring框架快速搭建Web工程项目
点击上方 "程序员小乐"关注, 星标或置顶一起成长第一时间与你相约每日英文 We all have a past. It's how you deal with it. 每个人 ...
前端如何快速上手 Web 3D 游戏的开发
简介: 本文以「余额宝3D跑酷游戏」为例,介绍了前端如何快速上手 Web 3D 游戏的开发. 作者 | RichLab楺楺诚空本文以「余额宝3D跑酷游戏」为例,介绍了前端如何快速上手 Web 3D ...
计算机录入大赛,计算机文字录入PPT幻灯片制作大赛策划书
计算机文字录入PPT幻灯片制作大赛策划书相关内容: "风筝满天飞,歌声多张扬"活动策划书活动主题:风筝满天飞,歌声多张扬本次活动象征生命与青春.热情与活力,我们舞台有多大我们梦想 ...
10个提升PPT幻灯片制作效率的方法
PPT是职场当中几乎每个人都有机会接触的工具,做PPT做的时间久了,要是你一直都在重复某些操作,但却没想办法提升效率. 这就不能怪别人都早早下班,而你还在苦逼苦逼地做着PPT了. 今天本文给大家总结了 ...
web表格控件FineReport作为企业web表格制作软件的核心优势
web表格控件FineReport作为企业web表格制作软件的核心优势报表表格设计器 Excel表格的设计风格企业在选择报表表格解决方案时,不仅要考虑报表表格工具的功能和服务,还要考虑它是否易学. ...
网页制作期末大作业成品 HTML5+CSS大作业——简约个性高逼格博客(5页) web网页制作期末大作业模板
HTML5+CSS大作业--简约个性高逼格博客(5页) web网页制作期末大作业模板常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞 ...
Powerpoint 2007幻灯片制作从入门到精通视频教程
视频简介 - Powerpoint 2007幻灯片制作从入门到精通视频教程,PowerPoint 2007 使用户可以快速创建极具感染力的动态演示文稿,同时集成工作流和方法以轻松共享信息.从重新设计的 ...

快速入手Web幻灯片制作