Bigger + better code blocks

Fixed or Completed
#1

Somewhat related to this comment, I’d love some way to have bigger code blocks, maybe even with syntax highlighting :grinning:

I think the 300 character limit makes sense for “normal” text, but it would be nice to lift the restriction in some cases like for code.

image
image594×1299 76.1 KB

Something else that would be really nice would be some syntax highlighting. In the example above, I have ```ts to open the fenced code block as an info string to mark the language of the code. Kinopio doesn’t parse this, and actually puts it into the rendered card.

I know syntax highlighting can really increase a page’s JS weight, and there’s added processing whenever rendering something that would have syntax highlighting.

An idea would be that instead of rendering the “full” text for a code card, only the first few lines are rendered and you can click on it to open the card and see all of the text (maybe in a floating modal or something?)

I had kind of hoped linking a Gist would be good here, but alas, the preview image is not helpful

1 Like
#2

hey TranquilMarmot,

would a good compromise be improving gist previews from cards? eg with something like gist-embed ?

1 Like
#3

That’s an interesting idea :thinking: it would probably handle my use cases pretty well, and it keeps the code editing / highlighting stuff off of Kinopio which is nice.

Main issue I can think of is that library has a few parameters you can pass to the embed, like data-gist-file, which would be nice to control.

1 Like
#5

in the works: (using iframes instead of a lib)

Untitled

the upside of iframes is the kinopio app doesn’t need big libs to process text highlighting. the downside is that bc of cors issues i don’t know the height of the content of the iframe so it’s just based proportionally on the width of the card it’s in

1 Like
#6

I love it :smile: it seems fine (especially for code blocks) for the iframe to just be scrollable like that. You wouldn’t want it to embed a site and make a gigantic card, anyway.

Would this just be for gists? Or are you considering making any site “iframeable” into a card? :thinking:

1 Like
#7

:articulated_lorry: shipped. Any site that has an iframely embed should work

2 Likes