# Fenced code blocks should add class to \`code\` rather than \`pre\`, matching the HTML best practice **URL:** \ **Category:** Spec\ **Created:** [September 3, 2014, 11:09pm UTC](https://talk.commonmark.org/t/fenced-code-blocks-should-add-class-to-code-rather-than-pre-matching-the-html-best-practice/136 "2014-09-03T23:09:22Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![mathias](https://talk.commonmark.org/user_avatar/talk.commonmark.org/mathias/32/89_2.png) [@mathias](https://talk.commonmark.org/u/mathias)\ **Post date:** [September 3, 2014, 11:09pm UTC](https://talk.commonmark.org/t/fenced-code-blocks-should-add-class-to-code-rather-than-pre-matching-the-html-best-practice/136/1 "2014-09-03T23:09:22Z")
The spec [currently says](http://jgm.github.io/stmd/spec.html#fenced-code-blocks): > An info string can be provided after the opening code fence. Opening and closing spaces will be stripped, and the first word is used here to populate the `class` attribute of the enclosing `pre` tag. I propose to change this as follows: > An info string can be provided after the opening code fence. Opening and closing spaces will be stripped, and the first word, prefixed with `language-`, is used as the value for the `class` attribute of the `code` element within the enclosing `pre` element. This means that ```` ```javascript var x = 42; ``` ```` Will not be translated to: ```html 
var x = 42;
``` …anymore, but instead to: ```html 
var x = 42;
``` Reason: this matches [the convention set out in the HTML standard itself](http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-code-element) — look for the code example that looks something like this: ```html 

  …
``` If that is not convincing enough, note that this convention is supported by many syntax highlighting scripts written in JavaScript, e.g. highlight.js and google-code-prettify. Requiring Markdown implementations to output code that is recognized by these scripts is a major win. ---
**Author:** ![halfdan](https://talk.commonmark.org/user_avatar/talk.commonmark.org/halfdan/32/173_2.png) [@halfdan](https://talk.commonmark.org/u/halfdan)\ **Post date:** [September 4, 2014, 9:31am UTC](https://talk.commonmark.org/t/fenced-code-blocks-should-add-class-to-code-rather-than-pre-matching-the-html-best-practice/136/2 "2014-09-04T09:31:42Z")
There is a similar discussion over at [Ghost](https://github.com/TryGhost/Ghost/issues/2675) to use the info string in fenced code blocks to generate a class prefixed by `language-` as mentioned in the HTML5 `code` spec. It would make a lot of sense to use what is already supported by many syntax highlighters. ---
**Author:** ![mathias](https://talk.commonmark.org/user_avatar/talk.commonmark.org/mathias/32/89_2.png) [@mathias](https://talk.commonmark.org/u/mathias)\ **Post date:** [September 5, 2014, 7:10am UTC](https://talk.commonmark.org/t/fenced-code-blocks-should-add-class-to-code-rather-than-pre-matching-the-html-best-practice/136/3 "2014-09-05T07:10:23Z")
Since everyone seems to agree, here’s the spec patch: [Make fenced code blocks add the `class` to `code` rather than `pre` by mathiasbynens · Pull Request #71 · commonmark/commonmark-spec · GitHub](https://github.com/jgm/stmd/pull/71) ---
**Author:** ![rwzy](https://talk.commonmark.org/letter_avatar_proxy/v2/letter/r/3d9bf3/32.png) [@rwzy](https://talk.commonmark.org/u/rwzy)\ **Post date:** [September 5, 2014, 3:08pm UTC](https://talk.commonmark.org/t/fenced-code-blocks-should-add-class-to-code-rather-than-pre-matching-the-html-best-practice/136/4 "2014-09-05T15:08:41Z")
I agree but I’d just like to point out what _potentially_ may be considered an edge case. If [#272](http://talk.commonmark.org/t/consistent-attribute-syntax/272) gets included, then a ‘code’ block without any language declaration should probably not have a code tag (which pandoc markdown actually includes) and only a pre tag, because it’s assumed it’s not actually computer code, but just preformatted text in general. So this would mean that: ```` ``` {.class} verbatim text ``` ```` should output: ```auto 
verbatim text
``` instead of: ```auto 
verbatim text
``` But without the curly braces, it should of course be as normal (mathias’ proposal). Is this the correct method of interpretation? Have I excluded another particular case where no language declaration might still be computer code/require a `code` tag? ---
**Author:** ![ThiefMaster](https://talk.commonmark.org/user_avatar/talk.commonmark.org/thiefmaster/32/288_2.png) [@ThiefMaster](https://talk.commonmark.org/u/ThiefMaster)\ **Post date:** [September 6, 2014, 10:00pm UTC](https://talk.commonmark.org/t/fenced-code-blocks-should-add-class-to-code-rather-than-pre-matching-the-html-best-practice/136/5 "2014-09-06T22:00:28Z")
I’d like to see a `data-language` attribute in addition to (or possibly instead of) the class. I doubt anyone applies CSS rules based on it the language without running the contents through a highlighter/formatter/whatever first so a data attribute feels like a better place to store this information. ---
**Author:** ![mathias](https://talk.commonmark.org/user_avatar/talk.commonmark.org/mathias/32/89_2.png) [@mathias](https://talk.commonmark.org/u/mathias)\ **Post date:** [September 7, 2014, 5:48pm UTC](https://talk.commonmark.org/t/fenced-code-blocks-should-add-class-to-code-rather-than-pre-matching-the-html-best-practice/136/6 "2014-09-07T17:48:39Z")
The HTML specification as well as existing syntax highlighting implementations all disagree with you. ---
**Author:** ![rwzy](https://talk.commonmark.org/letter_avatar_proxy/v2/letter/r/3d9bf3/32.png) [@rwzy](https://talk.commonmark.org/u/rwzy)\ **Post date:** [September 8, 2014, 12:19am UTC](https://talk.commonmark.org/t/fenced-code-blocks-should-add-class-to-code-rather-than-pre-matching-the-html-best-practice/136/7 "2014-09-08T00:19:31Z")
Actually I’ve come to the conclusion that it might be easier to just use a standard `
` tag in this case, since it’s a block element anyway. (So disregard that comment.)

---




**Author:** ![rokejulianlockhart](https://talk.commonmark.org/user_avatar/talk.commonmark.org/rokejulianlockhart/32/3399_2.png) [@rokejulianlockhart](https://talk.commonmark.org/u/rokejulianlockhart)\
**Post date:** [May 22, 2026, 4:26pm UTC](https://talk.commonmark.org/t/fenced-code-blocks-should-add-class-to-code-rather-than-pre-matching-the-html-best-practice/136/8 "2026-05-22T16:26:54Z")




@mathias, isn’t the best practice to utilise both, like `
`? The WHATWG’s HTML5 LS and IETF’s BCP 47 appear to recommend this (with `type="text/x.javaScript"` also appended, in `script`s).