Astro Theme Pure

Back

Content Presentation

About Content Page Rendering

Shiki Code#

Basic Usage#

For .astro file:

---
import { Code } from 'astro:components'
---

<Code lang='shell' code={`git log --oneline`} />
astro

For .mdx and .md file:

```shell
git log --oneline
```
markdown

Add Title#

start.sh
#!/bin/bash

bun check &
bun dev
shell
```shell title="start.sh"
#!/bin/bash

bun check &
bun dev
```
markdown

Show Diff#

Supports add and del lines.

deploy.sh
#!/bin/bash

bun check
bun lint
bun format
# No need for vercel or other ci/cd
bun run build
git push
shell
<!-- You need to delete `\` during the use -->

```shell title="deploy.sh"
#!/bin/bash

bun check
bun lint
bun format # [\!code ++]
# No need for vercel or other ci/cd
bun run build # [\!code --]
git push
```
markdown

Show Highlight#

<!doctype html><html><head><meta name="color-scheme" content="dark"></head><body style='overflow:hidden'> 
<!-- Highlight a single line -->
<p style='text-align:center'>君指先跃动の光は、私の一生不変の信仰に、唯私の超电磁炮永生き！</p> 

<!-- You can also highlight multiple lines with a single comment: -->
<canvas id="can" width="400" height="400" style="background:Black;display:block;margin:20px auto;"></canvas> 
<script> 
var sn=[42,41], dz=43, fx=1, n, score=-1, ctx=document.getElementById("can").getContext("2d"), sz=20;
onkeydown = e => fx = sn[1]-sn[0]==(n=[-1,-20,1,20][(e||event).keyCode-37]||fx) ? fx : n;
function draw(t,c) { ctx.fillStyle=c; ctx.fillRect(t%sz*sz+1,~~(t/sz)*sz+1,sz-2,sz-2); }
!function() { sn.unshift(n=sn[0]+fx);
  if (sn.indexOf(n,1)>0||n<0||n>399||fx==1&&n%sz==0||fx==-1&&n%sz==sz-1) return alert("GAME OVER. Score: "+score);
  draw(n,"Lime");
  if (n==dz) { score++; do{dz=~~(Math.random()*400)}while(sn.indexOf(dz)>=0); draw(dz,"Yellow"); }
  else draw(sn.pop(),"Black");
  setTimeout(arguments.callee,130);
}(); </script> 
</body></html>
html
<!-- You need to delete `\` during the use -->

```html
<!doctype html><html><head><meta name="color-scheme" content="dark"></head><body style='overflow:hidden'> 
<!-- Highlight a single line -->
<p style='text-align:center'>君指先跃动の光は、私の一生不変の信仰に、唯私の超电磁炮永生き！</p> <!-- [\!code highlight] -->

<!-- You can also highlight multiple lines with a single comment: -->
<canvas id="can" width="400" height="400" style="background:Black;display:block;margin:20px auto;"></canvas> 
<script> // [\!code highlight:11]
var sn=[42,41], dz=43, fx=1, n, score=-1, ctx=document.getElementById("can").getContext("2d"), sz=20;
onkeydown = e => fx = sn[1]-sn[0]==(n=[-1,-20,1,20][(e||event).keyCode-37]||fx) ? fx : n;
function draw(t,c) { ctx.fillStyle=c; ctx.fillRect(t%sz*sz+1,~~(t/sz)*sz+1,sz-2,sz-2); }
!function() { sn.unshift(n=sn[0]+fx);
  if (sn.indexOf(n,1)>0||n<0||n>399||fx==1&&n%sz==0||fx==-1&&n%sz==sz-1) return alert("GAME OVER. Score: "+score);
  draw(n,"Lime");
  if (n==dz) { score++; do{dz=~~(Math.random()*400)}while(sn.indexOf(dz)>=0); draw(dz,"Yellow"); }
  else draw(sn.pop(),"Black");
  setTimeout(arguments.callee,130);
}(); </script> 
</body></html> 
```
markdown

Content Obsolete Warning#

Add a warning message if the article is old enough.

src/layouts/BlogPost.astro
---
// ...
---
  <Hero {data} {remarkPluginFrontmatter} slot='header'>
    <Fragment slot='description'>
      {!isDraft && enableComment && <PageInfo comment class='mt-1' />}
      { 
        Math.floor((Date.now() - new Date(articleDate).getTime()) / 86400000) > 365 && ( 
          <p class='mt-1 text-sm italic text-primary' style='--primary:41 90% 50%'>
            This article was last updated over a year ago. Some information may be outdated.
          </p> 
        ) 
      } 
    </Fragment>
  </Hero>
astro

It will render like this:

This article was last updated over a year ago. Some information may be outdated.

Edit on GitHub

DOCS