Hacks for Long-form Writing in Tana

June 12, 2023

Tana Enhancer - Custom Tana Code Browser Extension

Link to Tana Enhacer An awesome browser extension by Andrea from Tana Nodes, this extension allows beginners to easily add custom code to modify certain Tana functionality and style.

#longform Hack by Jeff Harris

if you are on Tana's slack community, here's a link to Jeff's original post.

Thanks to Jeff for letting me post his code here.



/* Hide the bullets when zoomed into a node that has the #longform tag */
div[data-is-panel-header="true"]:has(span[data-tag="longform"]) + div .bullet {
    display: none;
}

/* Format the text for a zoomed in node that has the #longform tag */
div[data-is-panel-header="true"]:has(span[data-tag="longform"]) + div div[data-depth="2"] {
    /* font-face: 'fontnamegoeshere'; */
    /* uncomment this line and replace fontnamegoes here with any font installed on your device */
    text-indent: 2rem; /* first line indent*/
    margin-bottom: 1rem; /* amount of space between paragraphs */
    font-size: 1.3rem;
    line-height: 1.5em; /* the space between lines of text */
    text-align: justify;    
}

‍

Headings in Tana by Alexander Rink

Here's his code on GitHub. He also has some other great Tana hacks to explore here.

Thanks to Alexander for letting me post his code here.



div[data-tag-name=".quote"] > .contentSide {
	border-left: 2px solid var(--colorEditorText);
	padding-left: 8px;
	font-style: italic;
}

div[data-tag-name=".h1"] > .contentSide > div > .contentLine {
	font-size: calc(1.2rem * 1.25 * 1.25);
	font-weight: 700;
}

div[data-tag-name=".h2"] > .contentSide > div > .contentLine {
	font-size: calc(1.2rem * 1.25);
	font-weight: 600;
}

div[data-tag-name=".h3"] > .contentSide > div > .contentLine {
	font-size: calc(1.2rem);
	font-weight: 600;
}

span[data-tag='.quote'],
span[data-tag*='.h'] {
	opacity: 0.2;
}

span[data-tag='.quote']:hover,
span[data-tag*='.h']:hover {
	opacity: 1;
}

‍