Caption

Overview

The Caption component displays a code caption, wrapping a code block with a figure and appending a figcaption for the semantic markup.

Code Caption
console.log( 'Hi!' );
JavaScript

You can show it on the bottom of the figure:

console.log( 'Hi!' );
JavaScript
Bottom Code Caption

Usage

Register the Caption component:

import { RyuseiLight, Caption } from '@ryusei/light';


RyuseiLight.compose( { Caption } );
JavaScript

Or import the component file:

<script src="path-to-the-file/caption.min.js"></script>
HTML

Then, set a caption by options:

ryuseilight.apply( 'pre', { caption: 'Code Caption' } );
JavaScript

If you'd like to show it on the bottom of the block, pass an object with the position property: 

ryuseilight.apply( 'pre', {
  caption: {
    position: 'bottom',
    html    : 'Code Caption',
  },
} );
JavaScript

Data Attribute

You can provide the caption by the data-rl-caption data attribute: This value will overwrite options provided by the script.

<pre data-rl-caption="Code Caption">
  write code here
</pre>
HTML