code block example
Hey, i know code blocks are usually written using the
pre tag, but since that's a nightmare to read and navigate through in the html due to the fact you have to un-indent everything inside of it, i tried to come up with a more manageable way of creating one. Is it an acceptible method? Am i allowed to put div tags in code tags and span tags inside of eachother etc? does it cause any accessibility or semantic problems etc? i'd appreciate any opinions, thanks in advance.
https://codepen.io/deerCabin/pen/GRbpzML34 Replies
the typical thing for syntax highlight is to use
<pre> with <code> and then <span> for all the tokens with <br> for newlinesthere's also https://highlightjs.org/
yes, which you should use instead
everyone uses highlight.js for displaying code, even Discord and Stack Overflow
and does exactly what i described
it also has language detection, so, more often than not, you don't need to specify the language
ah okay i see, if you don't want to use a library though (i'm not saying i won't, i'll for sure look into it), would this sort of thing be acceptable?
you would be basically doing what highlight.js do, to make it work
you can't put
<div> inside <code> because <code> is inline and <div> is a blockTHAT'S WHAT I WAS MISSING! phrasing content
span, b, br, a, strong, ....
stuff like that
no p, div, pre and stuff can go inside the
<code>
you can put it, and the browser will probably do something, but good luckOh I didn’t know phrasing content existed, that’s super useful. In terms of br for line breaks, if everything is in a pre tag, couldn’t you enter a new line? Imagining it, everything would have to essentially be in one long line to prevent excessive space which would be a nightmare
trust me on this: you don't want to deal with fiddly indentation and newlines and all that stuff
it is inside the
<pre>, yes, but it is super fiddly
you can do it, but good luckIt's fine to figure this stuff out for understanding HTML, but displaying highlighted code is one of those cases where it's just much better to use the library.
like, by all means build it for fun and educational purposes, but just use highlight.js if you need to do it in production code
Ah okay, I appreciate the help, I’ll give it a go with what y’all have suggested and come back if I’ve got any other questions, pre is quite confusing haha
<pre> is pretty good for code and other related things, like console output and stuff like thati'll bear that in mind, thanks
so i assume this is the way you meant? https://codepen.io/deerCabin/pen/PorPVvw, but do you see how clumped everything is together in the html? i feel that would get hard to manage when there's a lot of "code".
everything in a single line
it makes whitespace easier to handle
you can use
	 to indentohh i see, i was just about to ask about indenting, and i assume i can use
tab-size to control that.
i updated the codepen, i'm not sure if i did it correctly but the br tags don't work when it's all in one lineit is working
Oh I got confused with line breaks and spaces sorry. If I wanted to add a space between two spans I assume I’d add two br tags?
hell no!
yikes!
that's 90's formatting 🤣
use line-height
Oh right 😅, but wouldn’t line height place space between where the red lines are? I meant space where the red arrow is.
Apologies for the poor diagram, I’m on my phone atm
this is what you want, right?
not quite, the shaded red is the space created by the line height, which does space the text out, however i mean like space space between it, like margin space, the shaded blue.
yes, that's an empty line, so, another br
ah okay, thank you for the help.
you're welcome
oh one more question, how about adding spaces between characters, i assume it'd be
 ?no, just space
oh okay, cool
the only annoying thing is the tabs for indenting, and the newlines
ah okay, thanks
you're welcome