HTML

HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. It defines the structure and content of web pages.

Usage

HTML code in the markup editor is added as is without compilation or processing to the body of the result page.

There is no need to add a full page structure (e.g. <html>, <head>, <body> tags). This is already handled by LiveCodes. (See Result Page Structure for more details.)

If you need to add content to the <head> section or <html> attributes of the result page, you can add it in the project info screen.

Demo

show code

JS
TS
React
Vue
Svelte

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "markup": {
      "language": "html",
      "content": "<h1>Hello, LiveCodes!</h1>\n<p>This is a paragraph in HTML.</p>\n<ul>\n  <li>Simple</li>\n  <li>Structured</li>\n  <li>Semantic</li>\n</ul>\n"
    }
  }
};
createPlayground('#container', options);

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "config": {
    "markup": {
      "language": "html",
      "content": "<h1>Hello, LiveCodes!</h1>\n<p>This is a paragraph in HTML.</p>\n<ul>\n  <li>Simple</li>\n  <li>Structured</li>\n  <li>Semantic</li>\n</ul>\n"
    }
  }
};
createPlayground('#container', options);

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "markup": {
      "language": "html",
      "content": "<h1>Hello, LiveCodes!</h1>\n<p>This is a paragraph in HTML.</p>\n<ul>\n  <li>Simple</li>\n  <li>Structured</li>\n  <li>Semantic</li>\n</ul>\n"
    }
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "config": {
    "markup": {
      "language": "html",
      "content": "<h1>Hello, LiveCodes!</h1>\n<p>This is a paragraph in HTML.</p>\n<ul>\n  <li>Simple</li>\n  <li>Structured</li>\n  <li>Semantic</li>\n</ul>\n"
    }
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

let options = $state({
  "config": {
    "markup": {
      "language": "html",
      "content": "<h1>Hello, LiveCodes!</h1>\n<p>This is a paragraph in HTML.</p>\n<ul>\n  <li>Simple</li>\n  <li>Structured</li>\n  <li>Semantic</li>\n</ul>\n"
    }
  }
});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

Styles and JavaScript

Most of the time, you will want to add styles and scripts in the respective editors. However, you can of course still add them in <link>, <style> and <script> tags in HTML. This can be useful in different scenarios, such as adding global variables that are then used in the script editor, or adding JavaScript together with a different script editor language (e.g. see SQL starter template)

Language Info

Name

html

Extensions

.html, .htm

Editor

markup

Compiler

None.

Code Formatting

Using Prettier.

Usage​

Demo​

Styles and JavaScript​

Language Info​

Name​

Extensions​

Editor​

Compiler​

Code Formatting​

Links​