Highlighted code in slides

[@the-old-channel]

In VSCode: select text -> Ctrl + Shift + P -> "Copy with syntax highlighting". Saved me so many hours making presentations. You can also set your editor’s theme to whatever you like to see in your slides.

[@MarquisKurt]

Panic's Nova editor also got this functionality very recently with Nova 12!

[@gamehatter6216]

great as always, love the outro songs we're getting now

[@gamehatter6216]

amospup character arc is real

[@fasterthanlime]

bark bark

[@Kabodanki]

How much for this dog behind the glass lol

[@LDVSoft]

Oh that's a world of cursed. Let me share some of mine. Speaking of slides, how do CS students do slides and homework? Of course in TeX, with beamer for slides. You can include verbatim monosoace text in TeX, but how do you make it pretty? Well, there is a package for that. How does it work? It asks you to install Pygments and to allow TeX to perform arbitrary code execution on your machine. Yep, in text markup language there are macros that expand to command execution. Then it consumes the output into the document.

[@_tobii]

I had some good luck with typst when I just wanted to display some snippets

[@TechnologicNick]

@@_tobii Typst also allows code to read arbitrary files on your computer though, see issue #5454 for example.

[@math7968]

@@_tobii me too

[@meowsqueak]

FWIW, I like to use slidev for presentations - for programmers it’s much more flexible than Google tools or PowerPoint or LaTeX, and you can do some nice code animation too.

[@fasterthanlime]

sli.dev actually looks really interesting, thanks for sharing!

[@gaeel330]

My big takeaway from this presentation is the light-dark() css function. I've been using prefers-color-scheme media queries for years now...

[@fasterthanlime]

Be warned that light-dark() is "baseline 2024" - folks with older iPhones etc. won't benefit from it.

[@gaeel330]

@@fasterthanlime Ah! I'll stick with what I have for now then. That said, I wasn't looking to rewrite my stylesheets any time soon

[@CattoFace]

Reminded me to look into adding copy buttons to my site, thanks

[@thepetesmith]

Every one of your videos has LOL moments man. Silly comedy like this is a lost art.

[@somebody_on_the_internetz]

Damn, how could I miss this release

[@sodiboo]

3:39 O.o hi!! that's me!!

[@fasterthanlime]

Hi hello! For the record your reply was funny, I just needed someone to illustrate copypasta 😌

[@sodiboo]

@@fasterthanlime wait fuck my reply has invalid Rust because that operator isn't real. oh no! immortalized in KZbin, everyone will see my syntactic blunder!

[@JamesMunns]

Color-y colors are my favorite colors

[@DriftJunkie]

Hello Mister, I've heard you like Color with your Color, so I took the liberty, to color your Colors!

[@fasterthanlime]

STOP TAKING SCREENSHOTS OF YOUR CODE EDITOR JAMES

[@JamesMunns]

​@@fasterthanlimehelp help I'm being oppressed

[@yavko]

You could use typst to make slides.

[@brunizzl]

i second this. for anyone who dislikes latex: typst is to latex, what rust is to c. - it has very markdowny syntax - no macros, but an actual good language under the hood (staticly typed!) - compiles in the blink of an eye - has sane error messages

[@PizzaRollExpert]

That's crazy man, I just do my code slides in latex

[@dotellie]

Very interesting! I was actually working on a product to solve this sort of use-case but slightly differently. Then life came in the way and I never got to finishing it. This video might be what I needed to start working on it again though!

[@fasterthanlime]

I'm glad it could inspire you! Can you share the approach you were thinking of taking?

[@dotellie]

@ In essence, it’s the “have a picture of the code in slides” approach, but souped up a bit. An application that would allow you to export code screenshots in whatever way you need, though primarily in png, svg and html format. So not the same, but reminiscent at least 😄

[@cramhead]

Fun video. Thanks for sharing. I always learn a little something in them.

[@fasterthanlime]

Thanks, that’s the idea!

[@MattGodbolt]

Lol at the Countdown music 😂😊

[@fasterthanlime]

YT lets you pick themes but I didn't cause I was in a hurry!

[@duvallj]

neat video! i learned something new about CSS today :)

[@rodrigosantoszz]

Hi, I love your channel, I’d just like to say that I wish you background wasn’t so dark because youtubes compression makes it look very bad

[@fasterthanlime]

That’s an interesting point I hadn’t considered before. I try to make my videos look like dark mode code editors because I assume my audience are night owls.. hopefully KZbin’s compression gets better over time? Or maybe it’s in my export? Not sure.

[@PthariensFlame]

@@fasterthanlimeAt least one member of your audience (this one) is a light-mode user and barely puts up with the color scheme in the videos because the material is interesting. 😅

[@SimonBuchanNz]

"i should be using lab() or whatever the other one is" - if you meant lch(), the polar version of the Cartesian lab(), both are based on CIELAB 1976; nowadays you should be considering oklab()/oklch() instead, the perceptual linearity of colors is far better - notably a rainbow finally doesn't look "bumpy"! It only took two or three times my lifetime....

[@zhaofengli8757]

Nice video! Just one question: Instead of massaging user-facing elements into Google Slides-facing clean HTML, why not have your blog engine emit it directly? You do lose the WYSIWYG benefits from relying on the browser's CSS engine to get the computed values, but in return you get reproducibility as well as the ability to directly tailor the final output for Google Slides. Bonus points for making a Slides extension that is backed by your own highlighting engine :P

[@fasterthanlime]

This is honestly the cleaner solution, and something I will likely move to, especially as I want to import highlighted code into DaVinci’s fusion tab, for example, or paste a color flipped version of my SVG diagrams into Keynote

[@giorgos-4515]

Google doesnt even make new features anymore, adding SVG support should have been way easier in Slides.

[@skeleton_craftGaming]

the answer to your problem is latex, it's always latex.. latex even has a native ish Apple implementation

[@fasterthanlime]

Not to kinkshame but I’m simply not into LaTeX. Thankfully there are other decent typesetting solutions now - much has changed since 1979!

[@aayushpaurana5967]

AMOS IS BACK

[@kdcadet]

beamer

[@hermannpaschulke1583]

or typst touying

[@fasterthanlime]

I never do latex outside the bedroom

[@shrirambalaji]

figma slides is nice, you might actually like it - has the features of keynote I want and you can do vector graphics (obviously)

[@fasterthanlime]

Ohh, I had never even thought of Figma for that. I found myself wishing Figma had more video timeline things, so I could use it more easily for motion design. I did once for the “third coffee and I’m explaining the Internet” video, but it was a lot of manual work still, setting transition times etc.

[@maxmustermann5590]

HES BACK

[@fasterthanlime]

With new pronouns! I go by they/them now. But thanks! Happy to be back!

[@ocean3323]

You can see computed styles in firefox

[@fasterthanlime]

Yes, but it doesn't support computedStyleMap: caniuse.com/?search=computedstylemap It does support window.getComputedStyle, as someone else pointed out, but that does something different.

[@SimonBuchanNz]

I was implementing copy paste handling for formatted text just a few weeks ago. Are you following me around, lime?

[@outasi_official]

the world of HDR is such a mess that i think the world should just abandon it at this point, but otherwise very cool video and concept. keeping code colors and formatting sounds real cool. i honestly wonder why we copy any and all text background by default

[@fasterthanlime]

Nooo I like HDR so much! My nice OLED tv makes me very happy and well, mostly I watch HDR10 content on there, although it’s Dolby Digital capable. I want to do more videos on color, but it would have to be in SDR to make sure everyone sees the same thing (ish)

[@outasi_official]

@@fasterthanlime i guess i just watch too much youtube, that's where 80% of the content i see comes from

[@berndeckenfels]

Cant you use reveal.js with highlite.js and use the css styles you want?

[@LV-ii7bi]

I still dont get it. did you solve the problem or not? 🤷‍♂

[@SianaGearz]

"google slides please get your stuff together" google slides joins the graveyard.

[@fasterthanlime]

I don't think it will - it's part of Google's hedging strategy against the office suite. They need people's documents, so they need a drive, an office suite, etc.

[@MarcCastellsBallesta]

I also made the mistake of dragging png files to a slide despite knowing it's not supported.

[@gassandrid]

If only slides were as simple as markdown….. ’’’rust println!(“isn’t this nice!”); ’’’

[@thecriticizedgamer8508]

Are you really not going to show the result?

[@fasterthanlime]

I did briefly at the end! And the description also has a link to my P99 conf talk recording.

[@johnlewis794]

your blog post is crashing my floorp tab :(

[@fasterthanlime]

Fascinating. I’ve heard of Mobile Safari crashing occasionally but.. Firefox?? Is it easy to reproduce? Can you troubleshoot a little?

[@CobaltSpace]

Why not use something like reveal js?

[@seinou7471]

or slidev, or this, or that, etc.

[@fasterthanlime]

I think it becomes awkward to export to PDF? (which we do for episodes of self-directed research, see sdr-podcast.com/episodes/) But also.. I do use visual elements in my slides, I like the WYSIWYG aspect of it, I just want to be able to import pre-existing diagrams (made in draw.io, Affinity Designer, Figma etc.) and pre-existing code blocks, that's it.

[@PragMero]

Mac user??? eew

[@fasterthanlime]

For the longest time I switched regularly between Windows (on a desktop tower) and Mac (since they have the best laptops) and only recently made the move to “all Macs”. It’s been good honestly! Took a bit of learning but for the most part it really gets out of the way (for a price..)

[@pst659]

ur mic/voice is terrible. can't hear some of the things you say. bye

[@fasterthanlime]

Out of curiosity, what are you listening on? Also, did KZbin enable auto generated subtitles for you?

[@kyle_rosenberg]

@@fasterthanlime Audio seems fine watching on my computer.

[@bazookavrn]

no, it sounds great, thanks for the content!

[@schtormm]

It's fine for me on my (admittedly probably pretty shitty) audio interface attached to my PC coupled with decent headphones lol

[@jrmoulton]

audio is good