Content: As a reader i should know the language of a code block

[ghost]

I'm reading this archived article
https://developer.mozilla.org/en-US/docs/Mozilla/WebIDL_bindings

And I'm not sure if in the code snippet Is used _JavaScript_, _CSS_, _C++_ or others.

[escattone]

@mattiapontonio I think this belongs more in the content repo. I'll transfer it over there.

[ghost]

@escattone ok but i can _show the language as a little label on top right_ 🥞 or I have to use headings or paragraph 🥗?

<pre title=CSS />

[hamishwillee]

@chrisdavidmills @escattone

Previously the docs showed a little string in the top right hand side of a code block indicating the language - so to me this is a legitimate toolchain question. Was it decided this isn't needed?

Chris, more generally where is the documentation on how to write and format a code block in our HTML source code? The best I can find is https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Code_guidelines/General but that doesn't even mention how the styling is applied (i.e. what are the options for brush).

If you look at the code generated by the previous wiki is it quite complicated - lots of classes like token etc - none of those are mentioned either. I'm not sure I am capable of writing a code block from scratch now.

Another good reason for markup - in that case presumably we will just do the normal github markup of three backticks and the language name.

[chrisdavidmills]

@hamishwillee The page you want is https://developer.mozilla.org/en-US/docs/MDN/Guidelines/CSS_style_guide — contains a syntax guide to all the special classes and HTML you might want to use. See https://developer.mozilla.org/en-US/docs/MDN/Guidelines/CSS_style_guide#code_syntax_highlighting in particular.

We SHOULD reintroduce a style to add a little label stating what language the code examples are in. @schalkneethling what repo would that be best put against?

Also @hamishwillee , you don't need to put in all the markup and classes for the tokens, etc. This is automatically done at build time by the Prism library we use for the highlighting (I think it's Prism?). If you find any of that stuff in the source, it is a bug. I wonder if we could fix that stuff up via a flaw?

[schalkneethling]

We SHOULD reintroduce a style to add a little label stating what language the code examples are in. @schalkneethling what repo would that be best put against?

Minimalist would be the place. Thanks!

[hamishwillee]

@chrisdavidmills Thanks very much. I was confused because the docs I've been working on (mostly server side express/django like this one are absolutely full of crap.
If all you need is to mark up the pre and specify the highlighting then that is awesome.

But we should fix this with a flaw because it is to easy to learn by copying as I did. Can you chase that?

[schalkneethling]

But we should fix this with a flaw because it is to easy to learn by copying as I did. Can you chase that?

I am not sure if this would be a fixable flaw, but it can most definitely be marked as a flaw(kinda like a warning a validator would produce) to at least make authors aware of the problem and encourage them to fix it. @peterbe would be able to provide a more definite answer in that regard though.

[hamishwillee]

Thanks @schalkneethling Some things already get spotted like code inside pre tag. Others do not - e.g. spans inside code tags.

[Ryuno-Ki]

Given the existence of Quines I doubt it can be marked as fixable flaw. Programming languages are too close to make a definitive choice. (think of for-loop's following C-style).

[ghost]

This PR solves everiting.
I'm Just waiting merge.
https://github.com/mdn/mdn-minimalist/pull/449

[peterbe]

So many different topics. Let's first focus on @hamishwillee and @chrisdavidmills 's points first.

1. The only thing you should type is <pre class="brush:js"> (or <pre class="brush: python">). No need for notranslate and note that it doesn't matter if you use a space after the : character.
2. pre tags, in the raw source, that already contains <code class="..."> is a flaw. And it's fixable. The flaw is called Bad <pre> tags. You can see it here: http://localhost:3000/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment#_flaws

The original point that @mattiapontonio brought up was; that it should say somewhere in the grey'ish code block area what type of code you're looking at. I think this is for @chrisdavidmills to decide. I don't think it's obvious that we should at all. After all, so many code snippets I look at are either dead obvious or just not important. Look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#customizing_the_appearance for example. To add "CSS" or "HTML" in the upper right-hand corner would just add noise to extremely little value. And here's another example, where it's implied that it's CSS by the context https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow#syntax

@chrisdavidmills Can you resolve this issue or if you think we should display the syntax used, move to Yari.