#Code block background color

9 messages · Page 1 of 1 (latest)

noble crescent
#

`I am having trouble changing the background color of a code block. I am using shiki with the dracula theme and the CSS below```pre,
code {
color: #d4d4d4;
font-size: 14px;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
line-height: 1.5;
direction: ltr;
white-space: pre;
text-align: left;
text-shadow: none;
word-break: normal;
word-spacing: normal;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

pre {
margin: 0.5rem 0 16px;
padding: 0.8rem 1rem 0.9rem;
overflow: auto;
background: #457b9d;
border-radius: 4px;
box-shadow: 0 0 10px #00000080;
}

:not(pre) > code {
padding: 0.1em 0.3em;
color: #db4c69;
background: #f9f2f4;
border-radius: 0.3em;
white-space: pre-wrap;
}

crimson summitBOT
#

Hi @noble crescent. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Astro has migrated its internal syntax highlighter library from shiki to shikiji, an ESM-focused alternative. This change simplifies bundling and maintenance but also introduces a potentially breaking change. Shikiji attempts to produce smaller HTML markup, and as a result, color styles are added to pre or code elements rather than directly to a token’s span.

Here's an example of how the HTML markup changes:

Before:

<code class="astro-code" style="background-color: #24292e">
 <pre>
 <span class="line" style="color: #e1e4e8">my code</span>
 </pre>
</code>

After:

<code class="astro-code" style="background-color: #24292e; color: #e1e4e8">
 <pre>
 <span class="line">my code<span>
 </pre>
</code>

This change does not affect the colors as the span will inherit the color from the parent. However, if you’re relying on a specific HTML markup, you should check your site carefully after upgrading to verify the styles.

If you're still having trouble with the background color, it might be due to this change. You can try adjusting your CSS to apply the background color to the code element instead of the pre element.

For more details, you can refer to the Astro 3.3 blog post (https://astro.build/blog/astro-330/).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@noble crescent kapa.ai is still learning and improving, please let us know how it did by reacting below

noble crescent
#

How do I show the full url in a .mdx file

#

@crimson summit How do I show the full url in a .mdx file

crimson summitBOT
#

Let me check the knowledge base for you. One moment! :books:

#

In Astro, you can access the URL of a page within a Markdown or MDX file using the Astro object. The Astro object contains a props property, which includes the url property. Here's an example of how you can use it:

// Now, `frontmatter`, `url`, and other Markdown layout properties// are accessible with type safety
const { frontmatter, url } = Astro.props;
---
<html> 
<head> 
<link rel="canonical" href={new URL(url, Astro.site).pathname}> 
<title>{frontmatter.title}</title> 
</head> 
<body> 
<h1>{frontmatter.title} by {frontmatter.author}</h1> 
<slot /> 
<p>Written on: {frontmatter.date}</p> 
</body>
</html>

In this example, url is used to create a canonical link for the page. You can use url in a similar way to display the full URL of the page in your MDX content.

For more information, you can refer to the Astro documentation on layouts (https://docs.astro.build/en/core-concepts/layouts/).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@noble crescent kapa.ai is still learning and improving, please let us know how it did by reacting below