Usually, blocks process an entire file, like a notes.md file gets processed by the Markdown block into a notes.html file. But Blocks don’t have to process an entire file! They can process part of a file, and that’s what we call Inline Block Processing.

In HTML, you can use a <div> to essentially change languages mid-document and have the code within the <div> processed by a named block. It looks like this:

<body>
   <h1>Hello, World!</h1>

   <div lang="md">
- This is a list
- in Markdown
- *cool*, right?
   </div>

</body>Code language: HTML, XML (xml)

The <div lang="md"> above will extract the contents, process it with the Markdown block, then put the resulting code back into the HTML for you. This will “trigger” the Markdown block as well, so you don’t have to manually add it yourself if you’re using Markdown for the first time on this Pen.

The lang attribute acts as an file extension.

Other Examples

Here’s a complete HTML file that has a bit of SCSS processing as well as Pug processing in the same file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <style lang="scss">
      @for $i from 1 through 55 {
        li {
          &:nth-child(#{$i}) {
            background-color: oklch(calc(#{$i} / 10) 0.1 6)
          }
        }
      }
    </style>
  </head>
  
  <body>
    
    <div lang="pug">
ul
  each val in [1, 2, 3, 4, 5]
    li= val
    </div>
    
  </body>
</html>Code language: HTML, XML (xml)

Requirements

Languages that either are HTML, compile into HTML (like .pug), and .vue files support Inline Block Processing.

  • It must be a <div> for HTML languages like lang="pug" and lang="md". It must be a <template> element for usage in .vue files.
  • It must be a <style> for CSS languages like lang="scss" and lang="stylus"
  • It must be a <script> for JS languages like lang="ts"

Languages Support

  • <div lang="pug">
  • <div lang="njk">
  • <div lang="md">
  • <style lang="scss">
  • <style lang="sass">
  • <style lang="less">
  • <style lang="styl">
  • <script lang="ts">