My Modern Inlinecode & Codeblock

Inlinecode

.quote {
	color: #e64400;
	border: black;
    padding-right: 5px !important;
}

Codeblock

#code-node,
#quote,
.quote {
	font-family: fira code;
    background-color: #F7F6F3;
    border: 0;
    color: rgba(240, 240, 239, );
    padding: 4px;
    padding-right: 40px;	/* change yourself */
    font-size: 90%; 
    line-height: 180%;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 0px !important;
    border-radius: 0.3em;
}

/* Codeblock Line Numbers */

:root {
    --line-number-width: 40px;
    --line-number-color: 
    --line-number-background-color: ;
    --code-node-border-radius: 2px;
}

.codeLine {
    counter-increment: codeLineNumber;
}

.codeLine:before {
    position: absolute;
    left: 0px;
    width: var(--line-number-width);
    box-sizing: border-box;
    padding-right: 5px;
    padding-top: 1px;
    content: counters(codeLineNumber, ".") " ";
    text-align: center;
    font-family: Helvetica;
    font-size: 13px
}

#code-node {
    padding-left: var(--line-number-width) !important;
}

/* Background of number bar */
#code-node:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    color: 				var(--line-number-color, black);
    background-color: 	var(--line-number-background-color, rgba(0, 0, 0, 0.04));
    border-radius: 		var(--code-node-border-radius, 7px) 0 0;
    width: 				calc(var(--line-number-width, 45px) - 7px);
}

#code-node .codeLine:after {
    content: " ";
    visibility: hidden;
}

A slight variation of @hannesfrank’s CSS library

5 Likes

Cool! but what’s the hashtag to enable the codeblock?

1 Like

@Renzo_A Notion like Callout Rem(Block)

1 Like

Perhaps Hannes, you misunderstand what he said. :rofl: