npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fast-slides

v2.0.1

Published

A HTML presentation generator based on markdown, reveal.js

Downloads

4

Readme

fast-slides

A tool for creating HTML5 slides from a markdown-grammar doc.

Markdown爱好者的福音 ———— 帮助您将Markdown语法编写的文档快速转换成HTML5幻灯片。

这一切,只需要一个命令:

slides FILE

就能在浏览器中看到酷炫的幻灯片了,有木有觉得很酷。

  • 纯绿色版,下载至本地,稍作配置后就可以使用
  • 支持windows,mac和linux平台
  • 在当前目录下自动生成以.preview.html为后缀的幻灯片文件
  • 支持file://本地访问,当然更可以部署到web服务器访问

感谢reveal.js,它提供了幻灯片的前端框架。

另,本文档的HTML5幻灯片版本传送门:Fast-Slides

先睹为快

对Markdown文档稍作改动,就可以自动生成HTML5幻灯片。

# 工作报告
MichaelHu / 2014-09

## 大纲
* 一季度项目和总结
* 二季度项目和总结
* 下半年工作计划 

## 一季度项目和总结
...

稍加改动:

@s
# 工作报告
MichaelHu / 2014-09

@s
## 大纲
* 一季度项目和总结
* 二季度项目和总结
* 下半年工作计划 

@s
## 一季度项目和总结
...

就可以转成幻灯片了, 点此查看幻灯片:工作报告

通过修改访问地址的查询参数,还可以看到不同主题和切换效果的幻灯片:

工作报告(moon主题、渐隐渐现)

工作报告(默认主题、线性切换)

文档编码和后缀

文档使用markdown语法编写,建议保存成.md后缀的文本文件,文件编码统一为UTF-8

语法

2.1 基础语法

在markdown语法基础上进行了扩展,markdown语法请参考这里

2.2 扩展语法

  1. @s [attr-list]:分隔幻灯片,必须从第一列开始写,单独一行。

    • 举例

        @s
        # 第一张幻灯片标题
        内容
      
        @s
        ## 第二张幻灯片标题
        1. red
        2. green
        3. yellow
    • 举例

        @s data-transition="linear"
        ## 第二张幻灯片标题
        1. red
        2. green
        3. yellow
  2. @vs [attr-list]:分隔垂直幻灯片,必须从第一列开始写,单独一行。

    • 举例

        @s
        # 第一张水平幻灯片标题
        内容
      
        @vs
        ## 第一张垂直幻灯片标题
        1. red
        2. green
        3. yellow
      
        @vs data-background-color="#ff8855"
        ## 第二张垂直幻灯片标题
        * China
        * America 
        * England
      
        @s
        # 第二张水平幻灯片标题
            #include <stdio.h>
            int main(){
                printf("Hello, World!");
            }
  3. 标签属性:@[attr-list]

    • 标签属性位于内容开始处,举例如下:

        ## @[class="fragment"]Slide Title 
        * @[class="fragment"]Red 
        * @[class="fragment"]Yellow 
        * @[class="fragment"]Blue 

      会产生以下输出,从而作为reveal的fragment存在:

        <h2 class="fragment">Slide Title</h2>
        <ul><li class="fragment">Red</li>
        <li class="fragment">Yellow</li>
        <li class="fragment">Blue</li></ul>
    • 其他的有序列表,段落,代码等也可以支持标签属性,也简单举例如下:

        ## 有序列表举例
        1. One
        2. @[style="color:red"]Two
        3. Three
      
        ## 段落举例 
        @[class="fragment"]这里是一个段落
      
        ## 代码举例
            @[class="fragment"]#include <stdio.h>
            int main(){
                printf("Hello, World!!\n");
            }

      会产生以下输出:

        <h2>有序列表举例</h2>
        <ol><li>One</li>
        <li style="color:red">Two</li>
        <li>Three</li></ol>
      
        <h2>段落举例</h2>
        <p class="fragment">这里是一个段落</p>
      
        <h2>代码举例</h2>
        <pre><code class="fragment">#include &lt;stdio.h>
        int main(){
            printf("Hello, World!!\n");
        }
        </code></pre>

安装和使用

下载程序包并在本地做简单部署,就可以了。具体说明一下:

  • 下载

    1. git clone

       git clone https://github.com/MichaelHu/fast-slides.git
    2. 也可以直接通过Download ZIP按钮将项目文件下载到本地

  • 部署以及使用方法

    1. Windows

      1. 下载以后解包至C:\slides

      2. C:\slides\slides.bat拷贝至C:\WINDOWS\system32

      3. 使用方式:

         slides.bat FILENAME
      4. 按以上方式解包,即可正常使用。如果需要自己更换目录,则需要修改slides.bat中对应路径参数。 如果不熟悉bat文件,则不建议修改,而使用默认部署

    2. Mac:

      1. 下载以后解包至某一本地目录,例如DIR/slides

      2. 修改DIR/slides/slides-mac.sh,将

         MARKDOWNCMD=/Users/hudamin/projects/git/git-myscripts/markdown/bin/slides/mac/markdown
         ROOT=/Users/hudamin/projects/git/git-myscripts/markdown/bin/slides

        修改成:

         MARKDOWNCMD=DIR/slides/mac/markdown
         ROOT=DIR/slides
      3. DIR/slides/slides-mac.sh拷贝成~/bin/slides

      4. 设置可执行权限

         chmod +x slides
      5. 使用方式:

         slides FILENAME 
    3. Unix: 与Mac非常类似,只需将mac出现的地方改成unix即可。

祝您用餐愉快