CodeSurfer-like dynamic code highlighting, zoom in and zoom out transformations.

[bwplotka]

Hello :wave:

Thanks for this awesome tool! We can't wait to use it for our future consistent presentations :muscle:

Problem

There is one important missing feature in Googe slides and that's why for the latest conference presentations we went for MDX Deck + CodeSurfer

The missing feature is dynamic code highlights, zoom-in, zoom-out transition so you can explain line by line what you are changing. We did this presentation on GoDays and FOSDEM and the feedback was extremely positive. The audience could follow the code much easier and we could explain more than just using static slides with limited size.

You can see the code and effect here: https://github.com/kakkoyun/are-you-testing-your-observability

The tradeoff was enormous though. The MDX Deck has some bugs and it's extremely tedious to set up, use, and build. Especially if you are not a frontend developer - you are essentially building a website. It's brittle, impossible to make it work for all projector resolutions etc, generating PDF's is impossible and you cannot link to one slide. We wrote more CSS than content :facepalm:

How to solve it?

So we are looking for another solution that will give us dynamic code, zoom in, zoom outs, and dynamic highlight transformations.

Do you think it will be possible to add some pseudo markdown components that will allow doing so? Do you think it is possible? Would you accept such a contribution? We are happy to help, just we definitely need some pointers :hugs:

Proposal

The idea would be to base on markdown code blocks with code surfer FOCUS:

`` `go 2:3,4[2:3]

Line1
Line2
Line3

`` `

This will highlight line 2 3 and second, third and fourth character of line 4.

Then we would need some way of describing which slides would be part of the transformation e.g.:

`` `go 2 <slide204>

Line1
Line2

newline
`` `

This will focus our code block on line 2, and animate removal of line3 and animate addition of newline. What to animate will be based on diff from code block on slide 204. I think with just this simple logic we could achieve a lot and generate Google slides with code and transformations which will add, remove, change fonts etc..

Sounds doable? :thinking: Thanks for help in advance!

cc @kakkoyun

[bwplotka]

Any feedback, pointers, suggestions? :hugs:

[bwplotka]

Looks like it's currently impossible to control animations through API, here is some feature request tracker https://issuetracker.google.com/issues/80441863