Skip to content

Latest commit

 

History

History
678 lines (522 loc) · 14.4 KB

introduction.md

File metadata and controls

678 lines (522 loc) · 14.4 KB
Raw
title author config style-config highlight-theme
MD-slide introduction
@azurity
loop
auto-invert

MD Slide

a server for slides which are generated from markdown

:fab-github: GitHub{.button .ghost}

based on

and server based on

and other libs that depend on or can be used

and more if you think I should support!

syntax supported

basic markdown syntax

see more at CommonMark Spec supported through markdown-it

# basic Markdown syntax

see more at [CommonMark Spec](http://spec.commonmark.org/) *supported through markdown-it*

slide syntax

<slide attr.../>

you can use class, wrap, align attributes

you will get:

<section class="align-attr your-classes-from-class-attr">
    <div class="wrap your-classes-from-wrap-attr">
        ...
    </div>
</section>

an example:

<slide class="bg-blue invert" align="left" wrap="size-40 frame"/>

background syntax

<slide/>
::image(image url)

or

<slide/>
::video(video url)
::image(https://source.unsplash.com/UJbHNoVPZW0/)

an example:

<slide/>
::image(https://source.unsplash.com/UJbHNoVPZW0/)

more about slides/background/layout syntax, see so: WebSlides CSS Syntax

container syntax

:::div{style=width:100px;height:100px .bg-red} :::

:::div{style=width:100px;height:100px .bg-red other-attributes}
:::

based on markdown-it-container, see so: markdown-it-container

attributes syntax sere so: attributes syntax

alias

some useful class has an shortcut. such as :::grid means :::div{.grid}

you can add more alias by editing container-alias.yaml

note syntax

note will be used in speaker mode

:::note
your note here.
:::

:::note your note here. :::

about speaker-mode, see so: speaker mode

attributes syntax

a line {#line .bg-trans-light}

{#line .bg-trans-light}

based on markdown-it-attrs, see so: markdown-it-attrs

easy font syntax

test{.font-TimesNewRoman} and{.font-UbuntuMono} test{.font-CourierNew}

**test**{.font-TimesNewRoman} **and**{.font-UbuntuMono} **test**{.font-CourierNew}

you can use this by as font-* and * will be set to as the font. to alias font name, edit easy-font-alias.yaml file.

meta syntax

---
title: MD-slide introduction
author: '@azurity'
config:
    loop: false
highlight-theme: 'https://cdn.bootcss.com/highlight.js/9.15.10/styles/solarized-dark.min.css'
---
  • title & author will be shown in the list page.
  • config will be used as WebSlides config.
  • highlight-theme will be used as highlight css theme.

font-awesome syntax

This is based on markdown-it-fontawesome & fonr-awesome v5 :fab-font-awesome:

:fab-font-awesome:

see so: markdown-it-fontawesome & Font Awesome

{data-step-count=1}

animation syntax

combine Animate.css & WebSlidesAnimation

:fas-info:{.bounce .infinite .animated}

{data-step-count=...}

something {.bounce .infinite .animated}

something with step {.animate-step .bounce data-step=1}

see so: Animate.css{.animate-step .fadeIn data-step=1} & WebSlidesAnimation{.animate-step .fadeIn data-step=1}

ruby syntax

{注|zhù}{音|yīn}{符|fú}{号|hào}

{注|zhù}{音|yīn}{符|fú}{号|hào}

based on markdown-it-ruby, see so: markdown-it-ruby

mark syntax

before==this is a mark=={.bg-red}after

before==this is a mark=={.bg-red}after

based on markdown-it-mark, see so: markdown-it-mark

, , , syntax

something ++insert++, delete, some^superscript^, somesubscript

something ++insert++, ~~delete~~, some^superscript^, some~subscript~

based on markdown-it-ins, markdown-it-del, markdown-it-sup, markdown-it-sub.

see so: markdown-it-ins, markdown-it-del, markdown-it-sup, markdown-it-sub

TeX syntax

now can only available in block mode!

$$e^{-i\pi} + 1 = 0$$ $$E = mc^2$$

$$e^{-i\pi} + 1 = 0$$
$$E = mc^2$$

based on markdown-it-katex & KaTeX, see so: markdown-it-katex

render DSL syntax

you can use this syntax to render DSL, such as: css-doodle & ECharts & mermaid & Timesheet.js & state-machine-cat & roughViz

use like:

```render(DSL-name)
DSL code
```

css-doodle example: ::::grid :::column

:doodle {
    @grid: 10 / 16em;
}
background-color: tomato;
transform: scale(@rand(.2, .9));

::: :::column

```render(css-doodle)
:doodle {
    @grid: 10 / 16em;
}
background-color: tomato;
transform: scale(@rand(.2, .9));
```

::: ::::

echarts example: :::::grid ::::column :::div{style=display:inline-block;width:400px;height:400px}

{
    "title": {
        "text": "ECharts 入门示例"
    },
    "legend": { "data":["销量"] },
    "xAxis": {
        "data": ["衬衫","羊毛衫","雪纺衫"]
    }, "yAxis": {},
    "series": [{
        "name": "销量",
        "type": "bar",
        "data": [5, 20, 36]
    }]
}

::: :::: ::::column

:::div{style=display:inline-block;width:400px;height:400px}
```render(echarts)
{
    "title": {
        "text": "ECharts 入门示例"
    },
    "legend": { "data":["销量"] },
    "xAxis": {
        "data": ["衬衫","羊毛衫","雪纺衫"]
    }, "yAxis": {},
    "series": [{
        "name": "销量",
        "type": "bar",
        "data": [5, 20, 36]
    }]
}
```
:::

:::: :::::

mermaid example:

::::grid :::column

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

::: :::column

```render(mermaid)
sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?
```

::: ::::

timesheet.js example

::::grid :::column

{
    "from": 2002,
    "to": 2008,
    "list": [
        ["2002", "09/2002", "A freaking awesome time", "lorem"],
        ["06/2002", "09/2003", "Some great memories", "ipsum"],
        ["2003", "Had very bad luck"],
        ["10/2003", "2006", "At least had fun", "dolor"],
        ["02/2005", "05/2006", "Enjoyed those times as well", "ipsum"],
        ["07/2005", "09/2005", "Bad luck again", "default"],
        ["10/2005", "2008", "For a long time nothing happened", "dolor"]
    ]
}

::: :::column

```render(timesheet)
{
    "from": 2002,
    "to": 2008,
    "list": [
        ['2002', '09/2002', 'A freaking awesome time', 'lorem'],
        ['06/2002', '09/2003', 'Some great memories', 'ipsum'],
        ['2003', 'Had very bad luck'],
        ['10/2003', '2006', 'At least had fun', 'dolor'],
        ['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],
        ['07/2005', '09/2005', 'Bad luck again', 'default'],
        ['10/2005', '2008', 'For a long time nothing happened', 'dolor']
    ]
}
```

::: ::::

state-machine-cat example

::::grid :::column

initial,
doing: entry/ write unit test
       do/ write code
       exit/ ...,
# smcat recognizes initial
# and final states by name
# and renders them appropriately
final;

initial      => "on backlog" : item adds most value;
"on backlog" => doing        : working on it;
doing        => testing      : built & unit tested;
testing      => "on backlog" : test not ok;
testing      => final        : test ok;

::: :::column

```render(smcat)
initial,
doing: entry/ write unit test
       do/ write code
       exit/ ...,
# smcat recognizes initial
# and final states by name
# and renders them appropriately
final;

initial      => "on backlog" : item adds most value;
"on backlog" => doing        : working on it;
doing        => testing      : built & unit tested;
testing      => "on backlog" : test not ok;
testing      => final        : test ok;
```

::: ::::

roughViz example

::::grid :::column

{
    "type": "Donut",
    "data": {
      "labels": ["JNCO Jeans", "Sweat Pants", "Jorts"],
      "values": [20, 10, 2]
    },
    "roughness": 2
}

::: :::column

```render(roughViz)
{
    "type": "Donut",
    "data": {
      "labels": ["JNCO Jeans", "Sweat Pants", "Jorts"],
      "values": [20, 10, 2]
    }
    "roughness": 2
}
```

::: ::::

asciinema-player example

::::grid :::column

https://asciinema.org/a/28307.cast

::: :::column

```render(asciinema)
https://asciinema.org/a/28307.cast
```

::: ::::

中国高校校徽 example

:xiaohui-njust:{style="font-size:160px;color:rgb(153,37,120);"}

:xiaohui-njust:{style="font-size:160px;color:rgb(153,37,120);"}

abcjs example

X:1
T:使命
M:4/4
L:1/4
K:F
((3G,/C/E/)|A2 G>D|E D>E A, B,>A,|G, G/>F/ E/ D E/|C C/>C/ C

```render(abcjs)
X:1
T:使命
M:4/4
L:1/4
K:F
((3G,/C/E/)|A2 G>D|E D>E A, B,>A,|G, G/>F/ E/ D E/|C C/>C/ C
```

::::grid :::column

{
    "url": "https://artplayer.org/assets/sample/video.mp4",
    "width": 400,
    "height": 300
}

::: :::column

```render(artPlayer)
{
    "url": "https://artplayer.org/assets/sample/video.mp4",
    "width": 400,
    "height": 300
}
```

::: ::::

speaker mode

Speaker mode can be used easily by ?mode=speaker

open speaker mode{.button}

list page

This root page (/) is a list for all slides on server.

file system

  • all module's static folders will be provided at /:module-name
  • all slides should saved in slides and will be provided at /slide/:slide-name/
  • if you need some static source, you can use a folder, that have a index.md and a public folder in it.
  • and the local static files will be provided at /slide/:slide-name/*
  • if you need to use global static source, save it in public, and will be provided at /public/*

folder mode see so: folder example

OAuth2, upload, remove function

  • you can login by uisng thrid party Oauth2 service.
  • for example, I write the github login code.
  • you can upload slide file(now single file mode only), if your name(provide by OAuth2) is same as the 'author' meta in your slide.
  • for example, my github is azurity and the 'author' meta in this slide is @azurity.
  • you can remove slide which belong to yourself.(condition is same as upload)

generate offline file

  • you can use the button in list page to generate one slide to an one file offline version.
  • generate offline file should choose the right OS that you want to used in.
  • offline file don't need network.
  • offline file is read-only up to now.
  • offline file has no other dependencies except browser.

If you need one more function, please create an issue on github.

:fab-github: issue{.button .bg-black}

maybe you want to see again?

:fas-arrow-up:{.button .ghost}