Repository files navigation

This repo contains miscellaneous lightweight tools and utilities written inJavaScript. They are published as an NPM package@xiee/utils. You can load themviajsdelivr.com, e.g.,

<scriptsrc="https://cdn.jsdelivr.net/npm/@xiee/utils/js/faq.min.js"defer></script><linkhref="https://cdn.jsdelivr.net/npm/@xiee/utils/css/faq.min.css"rel="stylesheet">

See the full documentation athttps://yihui.org/en/2018/11/md-js-tricks/.

Add thetitle attribute to<img> if the attribute does not exist. The valueof the attribute is taken from thealt attribute. It modifies

<imgsrc="foo.png"alt="an image"/>

to

<imgsrc="foo.png"alt="an image"title="an image"/>

Then the image will have a tooltip on mouseover.

Center<img>,<video>, and<object> on a page if they are the only childof their parent element.

Add thelanguage- prefix to the class name of<code> inside<pre> whenappropriate, so that syntax highlighters such as prism.js can work.

Add a copy button to any element (by default,<pre> code blocks) on a page.Seethis post for details.

Convert definition lists<dl> to<fieldset>. See more informationin thispost.

Find code blocks on a page and put them in the right column. Other elements willbe placed in the left column.

If a link of<a> does not start withhttp:// orhttps://, add theattributetarget="_blank" to<a> so it opens in a new tab/window.

Turn an ordered list on an HTML page into a collapsible FAQ list. Click on anyquestion to toggle the visibility of its answer. Or click on the button at thetop-right to expand or collapse all answers. Each FAQ item has an anchor (shownas the# symbol at the end on mouseover) that provides the link to thespecific question.

Note that you will need to loadfaq.css accordingly. Seea more detailedintroduction here.

Add[ ] to footnote numbers and move the return symbols in footnotes.

Fix the table of contents generated by lower versions of Hugo.

Move elements into<details> so that they can be folded. By default, codeblocks (<pre>) are folded. Other elements can also be folded via customoptions. Seethis post for moreinformation.

Click on a code block of the classlanguage-* to toggle the visibility of itssiblings on the page before the nextlanguage-* block. Click while holding theAlt key to toggle siblings of alllanguage-* blocks on the page.

Find<pre>,<table>, and TOC (with IDTableOfContents) elements and addthefullwidth class to them if they are too wide, so they can be styleddifferently (e.g.,full bleed).

Perform client-side site searching viaFuse.js. Seethis post for an application toHugo sites.

Convert HTML comments of the form<!--# comments --> to<span>comments</span>. If such comments are found, thedocument body will gain classeshas-notes andhide-notes. You can use CSS tostyle the notes or hide/show them as you wish.

Add anchor links to all section headings (e.g.,<h2>) that have nonemptyidattributes.

Find keyboard keys in<code></code> and convert the tag to<kbd></kbd>,e.g., convert<code>Ctrl + C</code> to<kbd>Ctrl</kbd> +<kbd>C</kbd>.Withkey-buttons.css, the keys will be styled as boxes with shadows likebuttons. You can learn more detailsin thispost.

Disable highlight.js's auto language detection, and then apply highlighting.This requires highlight.js to be loaded in advance.

Write LaTeX math expressions ($\alpha$) in<code></code> in HTML or a pairof backticks in Markdown (which will be rendered to<code> in HTML), and thisscript will remove the<code> tag, so that MathJax can recognize the mathexpressions (by default, MathJax ignores math in<code>).

Add thenohighlight class to<code> in<pre> when it does not have aclass, so that highlight.js will not try to syntax highlight the code in it.

Number figure and table captions.

Find all section headings (h1 -h6) and number them.

Add IDs of the formli-N to items in ordered lists, whereN is the index ofa list item. This makes it possible to reference or locate a specific item on apage by a hash in the URL. If you holdAlt and click on an item, you will getthe URL with the hash in the address bar of your browser.

Simply runrenderMathInElement(document.body) to render math expression usingKaTeX's auto-render extension.

Right-align a<blockquote> footer if the footer is a<p> that starts withthe em-dash.

Create HTML slides usingthe CSS Scroll Snaptechnique.

Create tabsets from section headings and their content. Seethispost for documentation.

Automatically build a table of contents (TOC) from all section headings.

Add a classactive to the TOC item (<a>) corresponding to the sectionheading that is currently being scrolled into view.