Inline
Inline CSS, JavaScript, SVG, and images in the HTML.
Options See on deno.land
- extensions string[]
The list of extensions this plugin applies to
Default:[ ".html" ]
- attribute string
Attribute used to select the elements this plugin applies to
Default:"inline"
- copyAttributes union[]
List of extra attributes to copy if replacing the element
Default:[ /^data-/ ]
Description
This plugin allows you to inline some sources, like CSS, images, or JavaScript, in the HTML automatically. Any HTML tag with the inline
attribute will be included in the HTML. For example:
<link rel="stylesheet" href="/css/my-styles.css" inline>
<script src="/js/my-scripts.js" inline></script>
<img src="/img/avatar.png" inline>
<img src="/img/logo.svg" inline>
<style>
/* Content of /css/my-styles.css */
</style>
<script>
// Content of /js/my-scripts.js
</script>
<img src="data:image/png;base64,...">
<svg>...</svg>
The source file must be exported to the dest
directory; there's no support for external URLs. {.tip}
Installation
Import this plugin in your _config.ts
file to use it:
import lume from "lume/mod.ts";
import inline from "lume/plugins/inline.ts";
const site = lume();
site.use(inline(/* Options */));
export default site;
SVG inline
Bitmap images (like .png
or .jpeg
) are inlined as base64 data but SVG images are replaced by the <svg>
element. The new <svg>
elements will keep the same class
and id
attributes as the replaced <img>
.
For example, this image:
<img src="icon.svg" class="icon" id="icon-1" inline>
Will become:
<svg width="180px" height="180px" xmlns="http://www.w3.org/2000/svg" class="icon" id="icon-1">
...
</svg>
By default, some attributes like id
or class
are copied from the original img
to the new svg
element. You can configure the plugin to copy more attributes using an array of strings or regular expressions:
site.use(inline({
copyAttributes: ["title", /^data-/], // Copy the "title" and all data-* attributes
}));