Shiki Code
Some methods for better using shiki code
Basic Usage#
For .astro file:
---
import { Code } from 'astro:components'
---
<Code lang='shell' code={`git log --oneline`} />For .mdx and .md file:
```shell
git log --oneline
```Add Title#
start.sh
#!/bin/bash
bun check &
bun dev
```shell title="start.sh"
#!/bin/bash
bun check &
bun dev</Fragment>
</MdxRepl>
## Show Diff
Supports add and del lines.
<MdxRepl width='80%'>
```shell title="deploy.sh"
#!/bin/bash
bun check
bun lint
bun format
# No need for vercel or other ci/cd
bun run build
git push
```
<Fragment slot='desc'>
````markdown
<!-- 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
```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> <!-- 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>
```