Related to this one, there are previous notes ¹, ², ³.

style container

Container for JS in a Hugo post can be styled as follow.

To produce above result, previous lines are used.

const width = "480px";
const height = "270px";
const border = "2px #4f81bd solid";
const background = "#4f81bd";
const borderRadius = "20px";
const color = "#ffffff";

const cnt = document.getElementById("cnt1");
cnt.style.width = width;
cnt.style.height = height;
cnt.style.border = border;
cnt.style.background = background;
cnt.style.borderRadius = borderRadius;
cnt.style.color = color;

cnt.innerHTML = "<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Hello, World!";

Notice that the style must be defined for all elements when necessary. In the given code begin and end shortcodes is not included since there are the same in previous notes ¹, ², ³.

future plan

To make shortcodes for displaying visual element in a Hugo post, as inspired by a discussion ⁴.

others

• Delete experimental.js in static/js.
• Rename main.js in themes/default/assents/js/ to main.js.md.

console.log('This site was generated by Hugo.');

• No JS in https://github.com/dudung/notes .

Languages
HTML
57.3%
 
CSS
42.7%

It is not necessary, but I just wanto to have a repo without JS? It seems cool. The JS files actually there in the shortcodes or partials.

refs