feat(highlight): integrate highlight.js for improved code highlighting

[grmbyrn]

feat(CodeBlock): integrate highlight.js for code syntax highlighting

• Added highlight.js to the CodeBlock component for syntax highlighting of code snippets.
• Imported the atom-one-dark theme for code styling.
• Implemented a normalizeIndentation function to ensure consistent indentation across code blocks by trimming excess spaces.
• Introduced a processCodeForDisplay function to replace escaped newline characters (\n) with actual newlines for better formatting.
• Modified the code prop to support the updated logic for normalizing and displaying code with syntax highlighting.
• Updated the rendering of code content with hljs.highlight to highlight the code based on the specified language.

These changes improve the readability and appearance of code snippets within the component by leveraging syntax highlighting and indentation normalization as mentioned in #52.

[josecelano]

Hi @grmbyrn the setup for the third-party code highlighter looks good.

I would like to have something easier to edit, but I guess multi-line strings are fine.

I've tried to created a new version with slots but the problem is the indentation.

The alternative component:

<script>
  import hljs from 'highlight.js';
  import 'highlight.js/styles/atom-one-dark.css';

  export let lang;
</script>

<div class="code-block">
	<pre>
		<code class="hljs" style="padding: 10px; background-color: #282c34;"><slot></slot></code>
	</pre>	
</div>

<style lang="scss">
	.code-block {
		//display: block;
		//position: relative;
		color: var(--color--code-text);
		font-family: var(--font--mono);
		//font-size: 1rem;
		line-height: 1.33em;
		//border-radius: 8px;
		//box-shadow: var(--card-shadow);
		//padding: 12px 10px 20px 10px;
		//min-height: 80px;
		//background-color: #282c34 !important;

		//margin: 30px 0;

		:global(pre) {
			overflow-x: auto;
			scrollbar-color: var(--color--primary) var(--color--primary-tint);
			scrollbar-width: thin;
			padding-bottom: 5px;
			max-width: 100%;

			&::-webkit-scrollbar {
				height: 8px;
			}
			&::-webkit-scrollbar-thumb {
				background: var(--color--primary);
				&:hover {
					background: var(--color--primary-shade);
				}
			}
		}

		.code-content code {
			border-radius: 8px;
		}
	}
</style>

And this is how you can use it:

			<CodeBlockWithSlot lang="bash">
				git clone [email protected]:torrust/torrust-index.git
					&& cd torrust-index && cargo build --release
					&& mkdir -p ./storage/database
			</CodeBlockWithSlot>

But you get this:

The first one is the one in this PR and the second is the one using the new component above.

On the other hand, I think we should fix the lang and copy/paste buttom:

To somethig more like in the demo:

Here: https://highlightjs.org/

[josecelano]

ACK 4fef01a

[grmbyrn]

Hi @josecelano I needed to implement a normalizeIndentation function on the code in CodeBlock which is why I wasn't able to use slots as I can't apply it to a slot. I had the same problem with indentation as you until I added the function.
I applied your CodeBlockWithSlot component to a couple of the code blocks which were having problems with Prettier and they work, but I don't think it makes sense to make a separate CodeBlockWithSlot component if it doesn't work everywhere, especially since wrapping them in the existing CodeBlock works.

What would you like to fix about the lang and copy/paste buttons? I presume you mean to put the lang in the corner of the code block instead of overlapping the corner, but I don't see a copy/paste button in the picture. How would you like to fix it?

[josecelano]

Hi @grmbyrn,

Hi @josecelano I needed to implement a normalizeIndentation function on the code in CodeBlock which is why I wasn't able to use slots as I can't apply it to a slot. I had the same problem with indentation as you until I added the function. I applied your CodeBlockWithSlot component to a couple of the code blocks which were having problems with Prettier and they work, but I don't think it makes sense to make a separate CodeBlockWithSlot component if it doesn't work everywhere, especially since wrapping them in the existing CodeBlock works.

I think I will leave as you did it for now. I also prefer to have only one. WE can change it in the future if we find a better way to edit the code inside the code block. Maybe multi-lines string are not so bad.

What would you like to fix about the lang and copy/paste buttons? I presume you mean to put the lang in the corner of the code block instead of overlapping the corner, but I don't see a copy/paste button in the picture. How would you like to fix it?

I meant just to fix it:

It looks like if the CSS is broken. I can't find a good exmaple with both the copy buttom and the label.

With copy buttom:

With lang:

I think the weird thing is the label not being inside (like the example) or outside like a tab.

Maybe the lang label with a tab and the copy button in the right top corner could be a good option.

[grmbyrn]

Hi @grmbyrn,

Hi @josecelano I needed to implement a normalizeIndentation function on the code in CodeBlock which is why I wasn't able to use slots as I can't apply it to a slot. I had the same problem with indentation as you until I added the function. I applied your CodeBlockWithSlot component to a couple of the code blocks which were having problems with Prettier and they work, but I don't think it makes sense to make a separate CodeBlockWithSlot component if it doesn't work everywhere, especially since wrapping them in the existing CodeBlock works.

I think I will leave as you did it for now. I also prefer to have only one. WE can change it in the future if we find a better way to edit the code inside the code block. Maybe multi-lines string are not so bad.

What would you like to fix about the lang and copy/paste buttons? I presume you mean to put the lang in the corner of the code block instead of overlapping the corner, but I don't see a copy/paste button in the picture. How would you like to fix it?

I meant just to fix it:

It looks like if the CSS is broken. I can't find a good exmaple with both the copy buttom and the label.

With copy buttom:

With lang:

I think the weird thing is the label not being inside (like the example) or outside like a tab.

Maybe the lang label with a tab and the copy button in the right top corner could be a good option.

Hi @josecelano I found the below example on this website where the user has the lang and copy code button above the code. Other than the below, I haven't found another example but I like how this looks. What do you think?

[josecelano]

Hi @grmbyrn,

Hi @josecelano I needed to implement a normalizeIndentation function on the code in CodeBlock which is why I wasn't able to use slots as I can't apply it to a slot. I had the same problem with indentation as you until I added the function. I applied your CodeBlockWithSlot component to a couple of the code blocks which were having problems with Prettier and they work, but I don't think it makes sense to make a separate CodeBlockWithSlot component if it doesn't work everywhere, especially since wrapping them in the existing CodeBlock works.

I think I will leave as you did it for now. I also prefer to have only one. WE can change it in the future if we find a better way to edit the code inside the code block. Maybe multi-lines string are not so bad.

What would you like to fix about the lang and copy/paste buttons? I presume you mean to put the lang in the corner of the code block instead of overlapping the corner, but I don't see a copy/paste button in the picture. How would you like to fix it?

I meant just to fix it:

It looks like if the CSS is broken. I can't find a good exmaple with both the copy buttom and the label.
With copy buttom:

With lang:

I think the weird thing is the label not being inside (like the example) or outside like a tab.
Maybe the lang label with a tab and the copy button in the right top corner could be a good option.

Hi @josecelano I found the below example on this website where the user has the lang and copy code button above the code. Other than the below, I haven't found another example but I like how this looks. What do you think?

Hi @grmbyrn I like it. I think:

• It's clean.
• There is a separation between the content and the actions/labels.
• It should be easier to implement in CSS.
• It's flexible. You can hide either the label or the copy button.