在线幻灯片

使用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(); }

    }

快速入手Web幻灯片制作的更多相关文章

  1. Web app制作细节:web app互动制作技巧

    Google .微软.苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的”云“服务平台,企图在web app时代到来的时候充当霸主.本文将围绕web app的制作, ...

  2. Android 工程师如何快速学会web前段

    Android 工程师如何快速学会web前段 今天主要聊一下本人最近在学习web前段的感受,最近html5是越来越火了,前段时间公司做了一个项目然后让我们“android”的程序猿过去帮忙把客户 端框 ...

  3. 力软信息化系统快速开发框架 web端+winform端

    力软信息化系统快速开发框架是一套集权限管理+快速开发+动态接口+通用组件+动态UI于一体的全新.net信息化快速开发框架.力软信息化系统快速开发框架的使用,大大地缩短了开发周期,提高了软件质量,同时也 ...

  4. Skippr – 轻量、快速的 jQuery 幻灯片插件

    Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...

  5. 快速搭建Web环境 Angularjs + Express3 + Bootstrap3

    快速搭建Web环境 Angularjs + Express3 + Bootstrap3 AngularJS体验式编程系列文章, 将介绍如何用angularjs构建一个强大的web前端系统.angula ...

  6. Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 ...

  7. windows下如何快速搭建web.py开发框架

    在windows下如何快速搭建web.py开发框架 用Python进行web开发的话有很多框架供选择,比如最出名的Django,tornado等,除了这些框架之外,有一个轻量级的框架使用起来也是非常方 ...

  8. Spring Boot入门-快速搭建web项目

    Spring Boot 概述: Spring Boot makes it easy to create stand-alone, production-grade Spring based Appli ...

  9. 在windows下如何快速搭建web.py开发框架

    在windows下如何快速搭建web.py开发框架 用Python进行web开发的话有很多框架供选择,比如最出名的Django,tornado等,除了这些框架之外,有一个轻量级的框架使用起来也是非常方 ...

随机推荐

  1. sed命令常见用法

    sed -n 'num1p' file 选出行号为num1的行sed -n 'num1,num2p' file 选出num1~num2行sed -n 'num1,$p' file 选出num1行到文件 ...

  2. 几种系统下查看FC HBA卡信息的方法

    几种系统下查看FC HBA卡信息的方法 目  录 几种系统下查看FC HBA卡信息的方法 FC HBA卡概述 Windows系统下查看FC HBA卡的信息 Linux系统下查看FC HBA卡的信息 U ...

  3. 批处理判断是否有.net环境

    @echo off (echo 已安装.NET Framework) else (echo 未安装.NET Framework) pause>nul

  4. PHP字符串的处理(三)-字符串的输出

    1.echo() echo()实际不是一个函数,是一个语言结构,不需要使用括号 <?php $str = "test"; echo $str."<br> ...

  5. Halcon学习之文本操作

    1.          新建文本文件open_file ( : : FileName, FileType : FileHandle ) 创建 ( 'output' or 'append' )或者打开  ...

  6. js中 visibility和display的区别 js中 visibility和display的区别

    大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的. visibility属性用来确定元素是显示还是隐藏,这用visibility=&q ...

  7. 并发之Striped64（l累加器）

    并发之Striped64(累加器)     对于该类的实现思想:    Striped64是在java8中添加用来支持累加器的并发组件,它可以在并发环境下使用来做某种计数,Striped64的设计思路 ...

  8. 八数码问题——A*大法好

    [描述] 在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字.棋盘中留有一个空格,空格用0来表示. 空格周围的棋子可以移到空格中. 要求解的问题是:给出一种初始布局(初始状态)和目标布局( ...

  9. (二)在eclipse中使用maven

    二.配置Maven插件 2.1.配置使用的Maven

  10. 使用Maven构建多模块企业项目

    首先,前面几次学习已经学会了安装maven,如何创建maven项目等,最近的学习,终于有点进展了,搭建一下企业级多模块项目. 好了,废话不多说,具体如下: 首先新建一个maven项目,pom.xml的 ...