Code snippet styles

Code example module

mixed.?

<?php
 // mixed example?

	$hi = "x";
?>

<div class='hi'>TEST</div>

<style>
* {
	box-sizing: border-box;
}
</style>

<script>
var x = "hello";
</script>

This one has a description. The next one will not.

mixed.?

<?php
 // mixed example?

	$hi = "x";
?>

<div class='hi'>TEST</div>

<style>
* {
	box-sizing: border-box;
}
</style>

<script>
var x = "hello";
</script>

This is the description for the group of examples. These are lesson-specific – and aren’t reusable in other resources.

JavaScript

Add adjacent HTML

const thing = `<h2>Some text template thing<h2>`;
  
const $placeOnPage = document.querySelector('[data-outlet="myPlace"]');

// this is missing the adding part!

This is a single feature. It’s a language feature or usage or concept that can be referenced in any other resource and is tied to the lessons so that the /features page shows ALL of the important code and concepts we in in the course. This is the optional context text field. (This example is also using the default heading)

Custom heading for this single feature

HTML usage

A common page

<!doctype html> 

<html lang='en'>
	<head>
		<!-- charset -->
		<!-- viewport -->
		<title>My amazing website</title>
		<!-- meta info -->
	</head>

	<body>
        <header>
            <h1>I'm a header!</h1>
            <nav>
                <a href='file.html'>Link</a>
                <a href='file.html'>Link</a>
            </nav>
        </header>

        <main>
            <section>
                <h2>I'm a section</h2>
            </section>

            <section>
                <h2>I'm a another section</h2>
            </section>
        </main>

        <footer>
            <h2>I'm a footer!</h2>
        </footer>
    </body>
</html>

Code snippet module

CSS

.has-code_snippet_module {
	//
}

page-module.code_snippet_module {
	color: red;
}
mark {
	color: #a9d9bc;
}