Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues Activity

Support Prism in the blog template example (#2622)

Browse source 
The Prism syntax highlighter failed to render properly when Astro was
initialized with the blog template. This was because the Prism CSS
conflicted with the default blog template.

This change-set removes the Viewport Width from the `pre` transform as
this property conflicted with the prism CSS. This change-set also
includes Prism in the Blog Post layout and adds a small javascript
example to the sample post.
This commit is contained in:
Ian Bull 2022-03-10 09:49:52 -08:00 committed by GitHub
parent 5d7a92b563
commit 55f007f30a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
examples/blog/src/layouts/BlogPost.astro
View file

@ -10,6 +10,7 @@ const { title, description, publishDate, author, heroImage, permalink, alt } = c
<html lang={content.lang || 'en'}>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prism-themes@1.9.0/themes/prism-lucario.css"/>
<BaseHead {title} {description} {permalink} />
</head>

10
examples/blog/src/pages/posts/index.md
View file

@ -14,3 +14,13 @@ description: Just a Hello World Post!
This is so cool!
Do variables work {frontmatter.value * 2}?
```javascript
// Example JavaScript
const x = 7;
function returnSeven() {
return x;
}
```

2
examples/blog/src/styles/blog.css
View file

@ -232,7 +232,7 @@ pre {
padding: var(--padding-block) var(--padding-inline);
padding-right: calc(var(--padding-inline) * 2);
margin-left: calc(50vw - var(--padding-inline));
transform: translateX(-50vw);
transform: translateX(-50);
line-height: 1.414;
width: calc(100vw + (var(--padding-inline) * 2));