@ryusei/code
Version:
<div align="center"> <a href="https://code.ryuseijs.com"> <img alt="RyuseiCode" src="https://code.ryuseijs.com/images/svg/logo.svg" width="70"> </a>
139 lines (122 loc) • 5.25 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML</title>
<link href="../../../../dist/css/themes/ryuseicode-ryusei.min.css" rel="stylesheet">
</head>
<body style="margin: 1em ">
<pre id="code">
<!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>
<script src="../../../../dist/js/ryuseicode-extensions.min.js"></script>
<script src="../../../../dist/js/languages/html.min.js"></script>
<script>
new RyuseiCode( { language: 'html' } ).apply( '#code' );
</script>
</body>
</html>