Building a slide deck in mdx-deck


hello explorers and welcome to another
video today I’m gonna talk about MDX Dec and this is a system where you can build
slide decks in your web browser have you ever written a comment to me did you
understand what I said well that’s probably because I use Grammarly I come
from Sweden and I use Grammarly every day just so I get something that can be
understood correctly and can be sensible for anyone who reads it and if you also
want some help and you want support this channel you can do it by following the
link down below so in this video I’m gonna show you how I changed my machine
learning deck that I had in one of my machine learning videos you can look at
that playlist up in their right hand corner MDX decks is very interesting you
take standard markdown files and you will create a deck about that so you can
actually create slideshows that are come from markdown files so if we look at
this little slideshow here you see that you have a lot of feature showing off
different lines of code we have code lines you can talk about this is said
it’s shown on line six seven in this code example and so on and I really like
this little kind of view of my code so I can talk about my code and so on
I used earlier something that that was called pitchme but pitchme had
a lot of setup and was not that intuitive to work with and this MDX deck
is using something that builds into react components so you can extend it
quite heavily if you like to and this theme that you see here is hacker theme
but you can change theme only by changing one line of code and you get
different theme and as it is react components you can also extend the theme
and change the theme to actually match up with your color profile and so on so
let’s look at the code so here we have first of the package json and I
installed MDX deck I also installed MDX deck code sniffer and that’s the
component I use to show my code last I have this raw loader that is used to
load files from the disk so if you look at my snippets folder here I have 34
Java files with code snippets and I chose to put them in separate files
because that is easier to read and work with so let’s look at my deck here I
first off import the code sniffer then I will actually export the hacked theme
from the deck themes folder so this is how you get the hacked theme that you
saw earlier then you have the first page here that you saw this is machine
learning object detection and so on these three dashed lines is separated
between cards then we have the next header and here you come to the first
code sniffer block and it looks as a standard jsx
component a standard react component it takes some code here and this code will
require the raw loader and this raw loader will load my snippet into this
code here so code actually takes the strings you can type in your own code
within a string but it’s easier to load it from disk and then this command here
will actually tell it to show the numbers on the side this can also have a
title so you can show it title in this case redundancy
cyclic redundancy check and you can also have a few steps and the steps can
either be one line that shown like this we can show a range of lines you can
also have in this and I just say I want 4 and 6 or the range 4 to 6 and then I
want the range a 9 to 10 so you can actually have multiple ranges within
this annotation and these will be shown as one step the last feature I want to
show you in this tooling here is actually that because it’s just a
rendered markdown file and because it’s all react components you can actually go
in here and write some more data here and when we have run at this and save it
you see that it actually updates in the slide deck so it’s a very fast way
to iterate and work through and create a slide deck when you can see the result
right off so I really like to work with this I really like how it’s set up and
if you bake this and build it into a runnable version you can deploy it
somewhere and it will actually compress it quite nicely as well so this was what
I wanted to talked about today I hope that you found this interesting I hope
that you liked this video give it a like share it with your friends and
colleagues if you haven’t subscribed yet please do that if you have any comments
suggestions or questions leave them in the comment section down below
and I really hope to see you in the next video Oh

, , , , , , , , ,

Post navigation

Leave a Reply

Your email address will not be published. Required fields are marked *