HTML, CSS, JavaScript

Contents

HTML, CSS, JavaScript#

Inline document#

The {exec} html directive allows displaying a complete HTML document as an <iframe>. The <iframe> defaults to a 16/9 aspect ratio, but its size can be adjusted with :output-style:.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 { margin: 0; font-size: 3rem; }
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('h1').appendChild(document.createTextNode('world!'));
});
</script>
</head>
<body>
  <h1>Hello, </h1>
  <p>A link to <a href="https://t-doc.org/">this site</a>.
</body>
</html>

Partial content#

Browsers are smart enough to render <iframe> tags with partial content correctly. So an {exec} html block can contain an HTML snippet only, and optionally styles (with a <style> element):

<style>
h1 { margin: 0; font-size: 5rem; }
</style>
<h1>Hello, world!</h1>

Or scripts (with a <script> element):

Please click <button>here</button>
<script>
document.querySelector('button')
  .addEventListener('click', () => alert('Click!'));
</script>

Web application#

Markdown already allows adding arbitrary HTML. Page-specific stylesheets and scripts can be added with the styles and scripts entries of a metadata directive.

Please click (count: 0)