@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>
36 lines (32 loc) • 1.06 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Caption</title>
<link href="../../../../dist/css/themes/ryuseilight-ryusei.min.css" rel="stylesheet">
</head>
<body>
<h3>Data Attribute</h3>
<pre class="ryuseilight" data-rl-caption="sample.js">
console.error( 'Something went wrong!' );
</pre>
<h3>Top</h3>
<pre class="top">
const container = document.getElementById( 'container' );
container.classList.add( 'is-active' );
</pre>
<h3>Bottom</h3>
<pre class="bottom">
const container = document.getElementById( 'container' );
container.classList.add( 'is-active' );
</pre>
<script src="../../../../dist/js/ryuseilight.min.js"></script>
<script src="../../../../dist/js/components/caption.min.js"></script>
<script>
const ryuseilight = new RyuseiLight( { language: 'js' } );
ryuseilight.apply( '.ryuseilight' );
ryuseilight.apply( '.top', { caption: 'Top Caption' } );
ryuseilight.apply( '.bottom', { caption: { position: 'bottom', html: 'Bottom Caption' } } );
</script>
</body>
</html>