fsprojects / FsReveal

FsReveal parses markdown and F# script file and generates reveal.js slides.
http://fsprojects.github.io/FsReveal
258 stars 100 forks source link

add support for fragmented slides. #36

Open isaacabraham opened 9 years ago

forki commented 9 years ago

Can you please give more details?

isaacabraham commented 9 years ago

http://lab.hakim.se/reveal-js/#/fragments

reidev275 commented 9 years ago

maybe not ideal, but if you're using markdown you can input the html directly

<section>
  <p class="fragment roll-in">Foo</p>
  <p class="fragment grow">Bar</p>
</section>
forki commented 9 years ago

Please propose a markdown syntax for:

<section>
    <section id="fragments">
        <h2>Fragments</h2>
        <p>Hit the next arrow...</p>
        <p class="fragment">... to step through ...</p>
        <p><span class="fragment">... a</span> <span class="fragment">fragmented</span> <span class="fragment">slide.</span></p>

        <aside class="notes">
            This slide has fragments which are also stepped through in the notes window.
        </aside>
    </section>
    <section>
        <h2>Fragment Styles</h2>
        <p>There's different types of fragments, like:</p>
        <p class="fragment grow">grow</p>
        <p class="fragment shrink">shrink</p>
        <p class="fragment roll-in">roll-in</p>
        <p class="fragment fade-out">fade-out</p>
        <p class="fragment current-visible">current-visible</p>
        <p class="fragment highlight-red">highlight-red</p>
        <p class="fragment highlight-blue">highlight-blue</p>
    </section>
</section>
forki commented 9 years ago

ping.

we still need an idea for the syntax.

kimsk commented 9 years ago

Could we do something similar to what reveal.js does?

I am thinking about something like this:

## Fragment Styles

There's different types of fragments, like:

grow <!-- .element: class="fragment grow" -->

shrink <!-- .element: class="fragment shrink" -->
reidev275 commented 9 years ago

The issue seems to be, "how do we add html attribute syntax to markdown?"

While I think it's probably as easy to just write the html (same issue with all other approaches of adding attributes that I've seen), I think @kimsk 's idea to continue the syntax of reveal.js would keep the two projects in sync which would probably have more benefits than rolling anything custom unless a really clean syntax is proposed.

reidev275 commented 9 years ago

Probably a dumb question, but here goes..., I have what I think is a working example but I'm not sure how to take the code I have in my branch and use it to actually build a site from markdown. How do you all do it?

forki commented 9 years ago

You mean building slides? Did you clone the master branch and run the build.cmd? It should open a browser. On Apr 2, 2015 8:30 PM, "reidev275" notifications@github.com wrote:

Probably a dumb question, but here goes..., I have what I think is a working example but I'm not sure how to take the code I have in my branch and use it to actually build a site from markdown. How do you all do it?

— Reply to this email directly or view it on GitHub https://github.com/fsprojects/FsReveal/issues/36#issuecomment-89002882.

CumpsD commented 9 years ago

Have you looked at https://github.com/hakimel/reveal.js/pull/677?

They included a reference too: https://github.com/VonC/reveal.js/blob/classes_in_markdown/test/test-element-attributes-markdown.html

## Slide 1.1 {_class="fragment fade-out" data-fragment-index="1"}

                        --

                        ## Slide 1.2 {_class="fragment shrink"}

                        Paragraph 1 {_class="fragment grow"}

                        Paragraph 2 {_class="fragment grow"}

                        - list item 1  {_class="fragment roll-in"}
                        - list item 2  {_class="fragment roll-in"}
                        - list item 3  {_class="fragment roll-in"}

                        ---

                        ## Slide 2

                        Paragraph 1.2  
                        multi-line {_class="fragment highlight-red"}

                        Paragraph 2.2 {_class="fragment highlight-red"}

                        Paragraph 2.3 {_class="fragment highlight-red"}

                        Paragraph 2.4 {_class="fragment highlight-red"}

                        - list item 1  {_class="fragment highlight-green"}
                        - list item 2  {_class="fragment highlight-green"}
                        - list item 3  {_class="fragment highlight-green"}
                        - list item 4  {_class="fragment highlight-green"}
                        - list item 5  {_class="fragment highlight-green"}

Test

![Example Picture{_class="reveal stretch"}](red-curtain-50x50.jpg)
reidev275 commented 9 years ago

@forki Indeed, from the master branch I can run build.cmd and it opens the browser, but from the master branch I'm not sure how to edit the FsReveal source. I branched off of develop to make code changes. Perhaps that's the source of my error?

kimsk commented 9 years ago

@reidev275 Are you talking about editing FsReveal code (FsReveal.dll)?

reidev275 commented 9 years ago

Yes, mapping paragraph literals with the pattern you mentioned into literals with html expected from reveal

Sent from my iPhone

On Apr 2, 2015, at 6:17 PM, Karlkim Suwamongkol notifications@github.com wrote:

Are you talking about editing FsReveal code (FsReveal.dll)?

— Reply to this email directly or view it on GitHub.

forki commented 9 years ago

Ah now I get the issue. You want to test your custom built fsreveal.dll!?

There are two simple ways: 1) create an unittest (there are samples) or 2) clone master branch into a different folder and set the build output of the develop branch to overwrite the fsreveal.dll in the master branch folder. On Apr 3, 2015 1:15 AM, "reidev275" notifications@github.com wrote:

Yes, mapping paragraph literals with the pattern you mentioned into literals with html expected from reveal

Sent from my iPhone

On Apr 2, 2015, at 6:17 PM, Karlkim Suwamongkol < notifications@github.com> wrote:

Are you talking about editing FsReveal code (FsReveal.dll)?

— Reply to this email directly or view it on GitHub.

— Reply to this email directly or view it on GitHub https://github.com/fsprojects/FsReveal/issues/36#issuecomment-89074974.