This repo contains miscellaneous lightweight 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">See the full documentation at https://yihui.org/en/2018/11/md-js-tricks/.
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>, <video>, and <object> on a page if they are the only child
of their parent element.
Add the language- prefix to the class name of <code> inside <pre> when
appropriate, 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.
See this post for details.
Convert definition lists <dl> to <fieldset>. See more information in this
post.
Find code blocks on a page and put them in the right column. Other elements will be placed in the left column.
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.
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.
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, code
blocks (<pre>) are folded. Other elements can also be folded via custom
options. See this post for more
information.
Click on a code block of the class language-* to toggle the visibility of its
siblings on the page before the next language-* block. Click while holding the
Alt key to toggle siblings of all language-* blocks on the page.
Find <pre>, <table>, and TOC (with ID TableOfContents) elements and add
the fullwidth class to them if they are too wide, so they can be styled
differently (e.g., full bleed).
Perform client-side site searching via Fuse.js. See this post for an application to Hugo sites.
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.
Add anchor links to all section headings (e.g., <h2>) that have nonempty id
attributes.
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. You can learn more details in this
post.
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 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>).
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.
Number figure and table captions.
Find all section headings (h1 - h6) and number them.
Add IDs of the form li-N to items in ordered lists, where N is the index of
a list item. This makes it possible to reference or locate a specific item on a
page by a hash in the URL. If you hold Alt and click on an item, you will get
the URL with the hash in the address bar of your browser.
Simply run renderMathInElement(document.body) to render math expression using
KaTeX's auto-render extension.
Right-align a <blockquote> footer if the footer is a <p> that starts with
the em-dash.
Create HTML slides using the CSS Scroll Snap technique.
Create tabsets from section headings and their content. See this post for documentation.
Automatically build a table of contents (TOC) from all section headings.
Add a class active to the TOC item (<a>) corresponding to the section
heading that is currently being scrolled into view.