GithubHelp home page GithubHelp logo

Math in slides? about hacker-slides HOT 4 OPEN

dextorious avatar dextorious commented on July 19, 2024
Math in slides?

from hacker-slides.

Comments (4)

jacksingleton avatar jacksingleton commented on July 19, 2024

Cool, thanks for bringing this up! As there is already support in Reveal it shouldn't be much work to add.

from hacker-slides.

rhunter avatar rhunter commented on July 19, 2024

I took a quick look at what might be involved – it's almost as simple as enabling the "math" plugin for Reveal.js.

With the "math" plugin enabled, you can write math using $y = f(x)$ in your Markdown, but it will only render as nice typeset math when the slide first comes into view. Any changes you type in will just appear as text.

  • The "math" plugin listens for a "slidechanged" event and tells MathJax to typeset the text.
  • Reveal.js only fires the "slidechanged" event when navigating from one slide to another – not when the text changes.

So the options are:

  • No special math handling (current state)
  • Math works for final presentation, but has no real-time preview (easy change)
  • Editing math works just like editing lists or links (more complicated change)

Full support is more complicated because it requires upstream changes (to Reveal.js) or hacky workarounds such as triggering MathJax typesetting directly.

from hacker-slides.

jacksingleton avatar jacksingleton commented on July 19, 2024

Hey thanks for looking into this.

I'm not entirely against hacky workarounds :)

First sorry for the state of the 'static' directory - a lot of it is plain old RevealJS, but some are files I've added/modified. If you look though on github you can see any file that doesn't have "initial commit" as the latest commit is one that I added or changed.

There is already a decent amount of hackyness to make live reload work as it does.

So a save gets kicked of after a debounced keyup event here: https://github.com/jacksingleton/hacker-slides/blob/master/static/index.html#L82

That kicks off the save function here: https://github.com/jacksingleton/hacker-slides/blob/master/static/js/save.js which executes an ajax call to the server but then also uses the postMessage api to send a message to RevealJS telling it to execute the reloadMarkdown function.

reloadMarkdown is defined and monkey patched onto RevealJS here: https://github.com/jacksingleton/hacker-slides/blob/master/static/slides.html#L118

highlightAnyCodeBlocks() exists for a similar reason you described here - we would lose highlighting whenever the content was edited.

What do you think about adding a triggerMathJaxTypesetting function?

from hacker-slides.

joshgiesbrecht avatar joshgiesbrecht commented on July 19, 2024

Just posting to say that I was just hunting for this feature and would love to see even a quick-hack edition added for now!

from hacker-slides.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.