Full HTML demo pattern
The HTML for the demo page can differ from the code samples displayed in the code pattern tabs. To achieve this, include the full HTML for the page in the demo.md file in the patterns directory, and ommit the layout property in the frontmatter. You still neeed to include the patternId in the frontmatter.
---
patternId: full-html-demo
---
<!DOCTYPE html>
<html>
<head></head>
<body>I'm a full HTML demo.</body>
</html><div>
This HTML is displayed as source code in the samples area of a CodePattern.
It is ignored and not included in "demo.html", because this pattern demo is
defined as a standalone, full HTML page.
</div>console.log('This JS is displayed in the samples area of a CodePattern.');
/**
* This file is ignored and not automatically included inside "demo.html",
* because this pattern demo is defined as a standalone, full HTML page.
*/
console.log('I am a special script declared as a static asset of this demo.');
/**
* This file is ignored and not automatically included inside "demo.html",
* because this pattern demo is defined as a standalone, full HTML page.
*/
body {
background-color: red;
}
/* This CSS is displayed in the samples area of a CodePattern.
It is ignored and not included in the demo.html, because in this pattern demo
is defined as a standalone, full html page. */