@ryusei/light
Version:
<div align="center"> <a href="https://light.ryuseijs.com"> <img alt="RyuseiLight" src="https://light.ryuseijs.com/images/svg/logo.svg" width="70"> </a>
227 lines (198 loc) • 6.84 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML</title>
<link href="../../../../dist/css/themes/ryuseilight-ryusei.min.css" rel="stylesheet">
</head>
<body>
<h3>Practical Example</h3>
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Markup Highlighting Example">
<meta property="og:url" content="https://example.com">
<meta property="og:description" content="Markup highlighting example">
<meta property="og:image" content="images/featured-image.jpg">
<meta property="og:site_name" content="Feather Highlight">
<meta name="title" content="Markup Example">
<meta name="description" content="Markup highlighting example">
<link rel="shortcut icon" href="https://example.com/images/icon.png">
<link rel="icon" href="https://example.com/images/icon.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://example.com/images/apple-touch-icon.png">
<link rel='dns-prefetch' href='//s.w.org' />
<title>Markup</title>
<script src="./main.js"></script>
<script src="https://example.com/library.js"></script>
<script>
<![CDATA[
<message> CDATA section </message>
]]>
</script>
<!-- Embed styles -->
<style>
/* Define variables */
:root {
--text-color: #333;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
body
{
color: var( --text-color );
padding: 0 !important;
}
#container {
padding: 2rem 2rem 4rem;
}
@media ( max-width: 1200px ) {
#toc {
padding: 1rem;
}
}
</style>
</head>
<body>
<header id="main-header" class="l-masthead p-masthead">
<div class="p-branding" style="margin-right: 2px; border: 1px solid #ccc; font-family: 'Times New Roman', serif;">
<span class="p-branding__logo">
<a
href="https://example.com/"
class="custom-logo-link"
rel="home"
>
<img width="167" height="54" src="https://example.com/images/logo-white-small.png" class="custom-logo" alt="Branding Logo">
</a>
</span>
</div>
<nav id="main-navigation" class="p-navigation">
<div class="menu-main-container">
<ul id="header-navigation-list" class="p-navigation__list">
<li id="menu-item-1" class="menu-item menu-item-1">
<a href="https://example.com" aria-current="page">Home</a></li>
<li id="menu-item-2" class="menu-item menu-item-2">
<a href="https://example.com/category/documents/">Documents</a>
</li>
<li id="menu-item-3" class="menu-item menu-item-3">
<a target="_blank" rel="noopener noreferrer" href="https://github.com/">GitHub</a>
</li>
</ul>
</div>
</nav>
</header>
<main id="main" class="p-main">
<section class="p-section">
<h2>Demo</h2>
<p>
Here is a very <strong>simple</strong> example:
</p>
<div class="p-example__splide">
<div
id="example"
class="p-example"
data-options='{"height":"9rem","breakpoints":{"600":{"height":"6rem"}}}'
>
</div>
</div>
</section>
</main>
<script>
// Small script code
const main = document.getElementById( 'main' );
main.addEventListener( 'click', function () {
console.log( 'clicked' );
} );
</script>
</body>
</html>
</pre>
<h3>Comments</h3>
<pre>
<!-- Comment -->
<!--
Multiline
Comment
-->
</pre>
<h3>Tags/Attributes</h3>
<pre>
<a
id="link"
href="https://example.com/"
class="custom-logo-link"
rel="home"
>
<figure style="padding: 2rem">
<img src="https//example.com/images/image.jpg" alt="An awesome image">
<figcaption>An awesome image</figcaption>
</figure>
</a>
</pre>
<h3>Style Tag</h3>
<pre>
<style>
input[type="submit"] {
padding: 1em 2em;
}
.container {
color: blue;
}
.container .button {
color: blue;
}
.container > .button {
color: blue;
}
.container + .button {
color: blue;
}
.container ~ .button {
color: blue;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
</style>
</pre>
<h3>Script Tag</h3>
<pre>
<script>
const object = { a: 1, b: 2, c: 3 };
const values = [];
Object.keys( object ).forEach( key => {
const value = object[ key ];
if ( typeof value === 'number' ) {
values.push( object[ key ] * 2 );
}
} );
console.log( values );
</script>
</pre>
<h3>HTML Entities</h3>
<pre>
&lt; &gt; &amp; &quot; &apos;
&cent; &pound; &yen; &euro; &copy; &reg;
&#60; &#162;
</pre>
<script src="../../../../dist/js/ryuseilight.min.js"></script>
<script src="../../../../dist/js/languages/html.min.js"></script>
<script>
const ryuseilight = new RyuseiLight();
ryuseilight.apply( 'pre', { language: 'markup' } );
</script>
</body>
</html>