elementize.min.cssto you markup
$(...).elementize();on the elements you would like to elementize
The below code illustrates an example usage, all available options and their default values.
matchCase: true, // Matches only "Be", not "BE", "be" or "bE"
displayAtomicNumber: true, // Controls display of atomic number in the top right corner
displayAtomicWeight: false, // Controls display of atomic weight in the bottom right corner
noPseudoElements: false, // Inserts atomic number and weight in a span element rather than data-attribute and :before/:after pseudo-elements
style: 'colorize' // Any of the following coloring styles: 'colorize', 'breaking-bad', 'clear'
Symbols found inside the matched elements will be wrapped in a
span.elementize-element (the block) and a
span.symbol (the symbol). The atomic number will be stored as a
data-attribute on the block container, or a
span.number element depending on your settings. In addition, the outer
span.elementize-element wrapper will have classes signifying element properties, such as
group-[0-18] along with one or more descriptive names such as
alkali-metal, facilitating highlighting of specific element groups etc.
Currently each text node replaced will be wrapped in a
span, which in turn contains another
span.elementize-element, while it should be possible to just skip the top level
span and append both replaced and untouched text nodes directly to their original parent node. This is due to the way replacements are made, and the only drawback appears to be superfluous