diff options
| author |  Ian Bull <irbull@gmail.com>
| 2022-03-10 09:49:52 -0800 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-03-10 11:49:52 -0600 |
| commit | 55f007f30ab4f4f664e584d4cbe70859a273bb25 (patch) | |
| tree | 170ff76bea54003acba3ac191c6eab1e382fb01b /examples/blog/src | |
| parent | 5d7a92b563ce87a181459b0b1a549fa6c9dbd204 (diff) | |
| download | astro-55f007f30ab4f4f664e584d4cbe70859a273bb25.tar.gz astro-55f007f30ab4f4f664e584d4cbe70859a273bb25.tar.zst astro-55f007f30ab4f4f664e584d4cbe70859a273bb25.zip | |
Support Prism in the blog template example (#2622)
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.
Diffstat (limited to 'examples/blog/src')
| -rw-r--r-- | examples/blog/src/layouts/BlogPost.astro | 1 | ||||
| -rw-r--r-- | examples/blog/src/pages/posts/index.md | 10 | ||||
| -rw-r--r-- | examples/blog/src/styles/blog.css | 2 |
3 files changed, 12 insertions, 1 deletions
diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro index bf682b7ae..50e854511 100644 --- a/examples/blog/src/layouts/BlogPost.astro +++ b/examples/blog/src/layouts/BlogPost.astro @@ -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> diff --git a/examples/blog/src/pages/posts/index.md b/examples/blog/src/pages/posts/index.md index 949dfb866..e118d869d 100644 --- a/examples/blog/src/pages/posts/index.md +++ b/examples/blog/src/pages/posts/index.md @@ -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; +} + +``` diff --git a/examples/blog/src/styles/blog.css b/examples/blog/src/styles/blog.css index f086aea0c..12bf5390b 100644 --- a/examples/blog/src/styles/blog.css +++ b/examples/blog/src/styles/blog.css @@ -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)); |