Styling#

The HTML inserted by this extension is wrapped into custom HTML element, for which you can define a custom definition. A default behavior is defined in js/sphinx_literate.js. To create a custom one, copy this file, edit it and disable the original one by turning the lit_use_default_style option to False.

NB: The default style has been designed for the Furo theme.

For instance, a reference to another block looks likt this:

<lit-ref name="Block title" href="#lit-12">
	<!-- [...] Fallback standard HTML -->
</lit-ref>

The customization JavaScript code for this looks like this:

// Style block references to look like <<Some other block>>
class LitRef extends HTMLElement {
	connectedCallback() {
		const shadow = this.attachShadow({ mode: "open" });

		const link = document.createElement("a");
		link.textContent = "<<" + this.getAttribute("name") + ">>";
		link.href = this.getAttribute("href");

		shadow.append(link);
	}
}

customElements.define("lit-ref", LitRef);