remark README

The project's README from github.com/gnab/remark. As one markdown file: README.md.

remark

Build Status CDNJS xscode Donate

A simple, in-browser, markdown-driven slideshow tool targeted at people who know their way around HTML and CSS, featuring:

Check out this remark slideshow for a brief introduction.

To render your Markdown-based slideshow on the fly, checkout Remarkise.

Getting Started

It takes only a few, simple steps to get up and running with remark:

  1. Create an HTML file to contain your slideshow (see boilerplate below)
  2. Open the HTML file in a decent browser
  3. Edit the Markdown and/or CSS styles as needed, save and refresh!
  4. Press C to clone a display; then press P to switch to presenter mode. Open help menu with h.

See any of the boilerplate-*.html files (the -local one requires building remark first), or just copy the boilerplate HTML below to start:

<!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://remarkjs.com/downloads/remark-latest.min.js">
    </script>
    <script>
      var slideshow = remark.create();
    </script>
  </body>
</html>

How To Use remark

The wiki pages contain all the how-to, templating, and API help.

Real-world remark slideshows

On using remark:

Other interesting stuff:

Printing

Converting to PDF is primarily supported via Chrome's Print to PDF feature. Note that the styling is not exact; See #50 for some recommended CSS to add to your styles.

Alternatively, you can use DeckTape, a PDF exporter for HTML presentation frameworks that provides support for remark.

Contributors

Thanks goes to these people for their contributions:

License

remark is licensed under the MIT license. See LICENSE for further details.

remark (gnab/remark)

Searching Database…

13K ·GitHub
Remark
这是什么？remark 是一个简单的、在浏览器中运行的、基于 Markdown 的幻灯片工具，面向熟悉 HTML 和 CSS 的人。你用 Markdown 编写幻灯片，remark 会在浏览器中把它们渲染成可实时播放的幻灯片。
我需要构建一个 JavaScript 库吗，还是只需要用浏览器打开一个普通的 HTML 文件？它只是一个普通的 HTML 文件：你创建一个包含 Markdown 幻灯片的 HTML 文件，然后直接在浏览器中打开，无需任何构建步骤。
我要怎样才能让幻灯片运行起来？创建一个 HTML 样板文件，在浏览器中打开它，然后编辑 Markdown 内容和 CSS 样式，刷新页面即可看到变化。
使用它需要安装 Node 或构建工具吗？不需要。remark 自带 Markdown 解析器，仅凭一个 HTML 文件就能直接在浏览器中运行；只有当你想在本地为 '-local' 样板构建 remark 时，才需要 Node。
我能把幻灯片导出为整洁的 PDF 吗？可以用 Chrome 打印成 PDF，但样式不会完全一致；如需精确的 PDF 导出，README 推荐改用 DeckTape。
这个幻灯片工具是给谁用的？它面向自己能编写 HTML 和 CSS 的人，例如为技术分享或讲座做演示的开发者，而不是非技术背景的演讲者。
演示文稿在平板和手机上也能用吗？可以。remark 支持触屏并带有滑动手势，因此幻灯片在智能手机和平板上与在桌面浏览器中一样可以使用。
如何使用带演讲者备注的演讲者模式？按 C 键将显示内容克隆到第二个窗口，然后在该克隆窗口中按 P 键切换到演讲者模式，这样会在幻灯片旁边显示你用 Markdown 格式编写的演讲者备注。
remark 支持带语法高亮的代码块吗？支持。它内置语法高亮，可为幻灯片中展示的多种编程语言代码着色。
在哪里可以找到模板和 API 文档？项目的 GitHub 维基页面包含用于自定义幻灯片的操作指南、模板和 API 文档。
幻灯片在不同屏幕尺寸下的显示效果一样吗？是的，remark 会对幻灯片进行缩放，使其在不同设备和分辨率下保持相近的外观。
What are similar projects?nodeppt, reveal.js, frontend-slides, editor.md, html-ppt-skill, marp, impress.js, open-slide
Which topics is it in?slideshow, navigation, touch, slides, templates, presentation, syntax-highlighting, javascript-library, pdf, css, html, markdown
Creator
gnab
Size
7 MB
Stars
13K
Updated
CommitJun 27Releasev0.15.0Jan 18
Age
15y
Commits · 90 Days