Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jirengu/ppt-cli
a slides framework using makrdown
https://github.com/jirengu/ppt-cli
Last synced: 4 days ago
JSON representation
a slides framework using makrdown
- Host: GitHub
- URL: https://github.com/jirengu/ppt-cli
- Owner: jirengu
- License: mit
- Created: 2016-09-26T03:28:19.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-04-28T07:08:36.000Z (over 5 years ago)
- Last Synced: 2024-10-13T11:27:16.498Z (about 1 month ago)
- Language: HTML
- Size: 280 KB
- Stars: 53
- Watchers: 5
- Forks: 23
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ppt-cli
A slides creator framework by using markdown.
## How to use
### Step 1, install ppt-cli
Run
```bash
npm install -g ppt-cli
```
#### Step 2, write markdown file
Write markdown file which would be translated to html file.
Your can alse use an online markdown file such as `https://raw.githubusercontent.com/jirengu/server-mock/master/README.md`
#### Step 3, run command
Run
```bash
ppt file.md
ppt file.md --theme=black --transition=zoom
ppt https://raw.githubusercontent.com/jirengu/server-mock/master/README.md
```
### Available parameters
- `--theme`: theme of your slide. You can set `beige, black, blood, league, moon, night, serif, simple, sky, solarized, white, star`. Default is league.
- `--transition`: Transition effect of you slide. You can set `none/fade/slide/convex/concave/zoom`. Default is slide.
- `--align`: Align of your text. You can set left/center/right. Default is left.
- `--css`: Custom style sheets. eg: --css="http://mystyle.com/index.css"
- `--js`: Custom js. eg: --js="./js/index.js"
- `--title`: Slide title
## Markdown file example
example.md
```
# A slides framework using mardkown
By ruoyu@jirengu
## Why use ppt-cli?
- Easy to install
- Easy to use
### Easy to install
Install this tool by only one command.
### Easy to use
Use this tool by only one command.
## How to use
Run `npm install -g ppt-cli`.
## Thanks
```
## More usage
### Adding custom attributes
Add id(header), class(layout) and data-name(hunger valley) to current `
` element and current section `` element .
```bash
### title{#header .layout data-name="hunger valley"}
#header {
color: red;
}
```
### Using JavaScript
```
### title
alert(1)
```
Javascript belong to current section will run automatically when slides turning to this section.
### Using HTML
```
click me
btn.onclick = function(){
alert('I am clicked')
}
```
### Custom content align
- add a class `align-left` to current section which align the content to left
- add a class `title-center` to current title(h3), which align the title to center
```bash
### Section title{.title-center .align-left}
```
### Using custom background images
```
### Section with background image {data-background-image="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg"}
```
### Using custom background color
```
### Section with custom background color{data-background-color="blue"}
```
### More effect?
Visit [https://github.com/hakimel/reveal.js](https://github.com/hakimel/reveal.js)