@xiee/utils

This repo contains miscellaneous tools and utilities written in JavaScript. They are published as an NPM package @xiee/utils. You can load them via jsdelivr.com, e.g.,

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

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

alt-title.js

Add the title attribute to <img> if the attribute does not exist. The value of the attribute is taken from the alt attribute. It modifies

<img src="foo.png" alt="an image" />

to

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

Then the image will have a tooltip on mouseover.

center-img.js

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

external-link.js

If a link of <a> does not start with http:// or https://, add the attribute target="_blank" to <a> so it opens in a new tab/window.

faq.js

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

Note that you will need to load faq.css accordingly. See a more detailed introduction here.

fix-footnote.js

Fix links to/from footnotes rendered by lower versions of Hugo (Blackfriday) when footnotes do not contain any ASCII characters, in which case Hugo is unable to render unique ids for the footnote items (the id is fn:-).

fix-toc.js

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

hash-notes.js

Convert HTML comments of the form <!--# comments --> to <span class="hash-note">comments</span>. If such comments are found, the document body will gain classes has-notes and hide-notes. You can use CSS to style the notes or hide/show them as you wish.

header-link.js

Add anchor links to all section headers (e.g., <h2>) that have nonempty id attributes.

key-buttons.js

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>. With key-buttons.css, the keys will be styled as boxes with shadows like buttons.

load-highlight.js

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

math-code.js

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

no-highlight.js

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

right-quote.js

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