Modern Scrollable Codeblock

[Browneyedsoul]

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

[Renzo_A]

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

[hannesfrank]

@Renzo_A Notion like Callout Rem(Block)

[Browneyedsoul]

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;
}  

[23727]

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

[Browneyedsoul]

I am very happy that you are satisfied.

[lyrk]

@Browneyedsoul hey mate I applied your css to custom css but it is only applied to inline code blocks.
What to do for it to affect normal code blocks?

[Browneyedsoul]

Hey @lyrk
Use this

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Modern%20Scrollable%20Code%20Block.css");

[lyrk]

@Browneyedsoul I just pasted the link into custom css block but how will I call this? I was using //icb before. Does it work the same way or does it have a separate name to call?

[lyrk]

@Browneyedsoul It doesn’t work. When I create a new code block it is the default style.

[lyrk]

@Browneyedsoul It doesn’t work when I create a new code block. Horizontal scroll is not seen. It returns next line.

[Browneyedsoul]

Hey! Can you show me some screenshots of how you applied it in Custom CSS Page?

[lyrk]

of course. This is a screenshot of my Custom CSS. @Browneyedsoul In custom CSS, horizontal scroll bar is seen under your github link but when I create a new code block in another page, it is default.

[lyrk]

In custom CSS, horizontal scroll bar is seen under your github link but when I create a new code block in another page, it is default.

Custom CSS:

[Browneyedsoul]

When you move mouse over it, scrollbar should appear like this

[lyrk]

@Browneyedsoul Yes it has scroll bar in that Snippet in mine too. But when I make a new code block in another page, it doesn’t have that. Can you pls make a new code block in another page which is long line? Does it have scroll bar also? Does your snippet work only in Custom CSS page?

[Browneyedsoul]

@lyrk Sure!

[lyrk]

@Browneyedsoul Can you make a new code block in a page which is not Custom CSS page with /iic or /icb ? Does it have scroll bar on long lines? Mine doesn’t. I uploaded a screenshot above.

[Browneyedsoul]

It seems that you have some confilct with other CSS Snips Could you check about that?
Font property doesn’t even applied in your picture

What browser are you using for running RemNote? (Chromium based / Safari / Windows(Mac) Desktop / Others)

[lyrk]

@Browneyedsoul I deactivated all other snippets by checking checkbox but still the same. I use Chrome.