setting up Shared Notes with the exact same css as Trilium

[diyoyo]

Hi,
when visualizing shared notes online (without being logged in), css is way simplified.
Is there a way to render them in a wysiwyg way, exactly like when visualizing them in the browser when logged in, with the only difference that everything will be fully locked, read-only etc?

[dosubot[bot]]

Shared notes intentionally use a separate, simplified theme (packages/share-theme) rather than the full Trilium client CSS. However, Trilium provides several attributes to close the gap:

1. ~shareCss relation — Create a CSS code note with your custom styles and add a ~shareCss relation from your shared note (or shared root) to it. The CSS note must be within the shared subtree. This stylesheet gets injected alongside the defaults [1].

2. #shareOmitDefaultCss label — Add this label to strip the default share theme CSS entirely, then provide your own complete stylesheet via ~shareCss. This gives you full control over styling [2].

3. ~shareHtml relation + #shareHtmlLocation label — For injecting <style> blocks or <link> tags at specific spots in the page (head:start, head:end, body:start, etc.) [[3]](https://github.com/TriliumNext/Trilium/blob/91923977e1268150766fcddaa94ad5f99ac2c858/docs/User Guide/User Guide/Advanced Usage/Sharing.md#L143-L167).

4. ~shareTemplate relation — For complete control over the page structure by providing a custom EJS template. Note: this requires backend scripting to be enabled [[4]](https://github.com/TriliumNext/Trilium/blob/91923977e1268150766fcddaa94ad5f99ac2c858/docs/User Guide/User Guide/Advanced Usage/Sharing/Custom share template.md#L14-L17).

The share page already applies the .ck-content class to text notes [5], so CKEditor content styles do take partial effect. To get closer to a WYSIWYG look, you'd create a CSS note that includes the CKEditor content styles from the full client (things like table formatting, admonition blocks, code block styling, etc.) and link it via ~shareCss. Combining that with #shareOmitDefaultCss if the defaults conflict would give you the most faithful reproduction of the in-app appearance.

Keep in mind that the page structure (navigation sidebar, header/footer) will still differ from the editing interface — these attributes only control the content area styling.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.