Modern Scrollable 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

NOTICE: NEW UPDATE 210813

What’s new : Horizontal scroll update
In Progress : Sticky Language Converter (found a compromise)
Right now, some menu bugs exist. I’m still trying to manage to fix it!

/*********** Basic (Inline)CodeBlock Style ***********/
.quote {
	color: 			#E64400;
    padding-right: 	5px !important;
}

#code-node {
    padding-left: 	40px !important;
    padding-top: 	10px !important;
    padding-bottom: 10px !important;
	position: 		relative;
	z-index: 		0;
	overflow-x: 	auto;
	overflow-y: 	auto;
    white-space: 	pre;
}

#code-node, #quote, .quote {
	font-family: 		Roboto Mono, Fira code;
    background-color: 	#F7F6F3;
    border: 			0;
    padding: 			4px;
    padding-right: 		40px;
    font-size: 			0.9em !important; 
    line-height: 		180%;
    margin-top: 		2px;
    margin-bottom: 		2px;
    margin-left: 		0px !important;
    border-radius: 		0.3em;

}

#EditorContainer .rem-text {
	position: relative;
	z-index: 0;
}

.rem-text .tumbnail--with-width {
	position: relative;
	z-index: 0;
}

/*********** Codeblock Line Number Bar ***********/
:root {
    --line-number-width: 40px;
    --line-number-color: ;
    --line-number-background-color: #EDECE9;
    --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: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;
}


/*********** Language Converter ***********/
#code-node__change-language-dropdown {
	position: 	fixed;
	right: 		40px;
	bottom: 	0px;
}

#code-node .ui.upward.dropdown {
	position: 		absolute;
	right: 			100px;
	top:			0px;
	z-index: 		10;
}

#code-node .ui.active.visible.dropdown {
	position: 	absolute;
	right: 		100px;
	top: 		0px;
	z-index: 	10;
}

#code-node .copy.outline.icon.code-node__copy-button {
}

#code-node .ui.dropdown .menu {
    color: 				black;
    background-color:	#282a36;
	white-space: 		pre;
}

#code-node .ui.dropdown .menu >.item {
	font-size: 		16px !important;
	font-family: 	Sans Serif Workhorse;
	font-weight: 	500;
 	border-radius: 	1px;
 	color: 			#2B3137;
}

#code-node .ui.dropdown .menu >.item:hover {
	color:				black;
    background-color: 	#44475A;
 	border-radius: 		1px;
    background-color: 	#F1FA8C;
 	border-radius: 		1px;
}

#code-node .visible.menu.transition {
	position: 			absolute;
	z-index:			10;
	right: 				240px !important;
	background-color: 	#F5F4F0 !important;
	color: 				;
	position: 			relative;
	height: 			240px !important;
	overflow:			auto;
}

#code-node .visible.menu.transition .selected.item, 
#code-node .visible.menu.transition .ui.header.text {
	background-color: 	#FD8A88 !important;
	color: 				yellow !important;
	border-radius: 		1px;
}  
3 Likes

@Browneyedsoul, thank you for the code block css—it is MUCH nicer than the default.

2 Likes

I am very happy that you are satisfied. :grinning_face_with_smiling_eyes:

1 Like