UNPKG

@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
<!DOCTYPE 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>