diff options
| author |  Juan MartÃn Seery <me@juanm04.com>
| 2022-01-31 19:14:07 -0300 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-01-31 16:14:07 -0600 |
| commit | 6fe1b0279fce5a7a0e90ff79746ea0b641da3e21 (patch) | |
| tree | c2924bfd3e2c131d135cc8b2ceecbec310c6be56 /examples/with-markdown-shiki/src | |
| parent | 618a16f59d4037cff1665110f0ed111a96a96437 (diff) | |
| download | astro-6fe1b0279fce5a7a0e90ff79746ea0b641da3e21.tar.gz astro-6fe1b0279fce5a7a0e90ff79746ea0b641da3e21.tar.zst astro-6fe1b0279fce5a7a0e90ff79746ea0b641da3e21.zip | |
Add Shiki as an alternative to Prism (#2497)
* [ci] yarn format
* Added shiki to markdown-remark
* Upgraded astro shiki
* Added minimal example
* Changed defaults to match <Code />
* Replace `shiki` with `astro` classes
* Added documentation
* Updated Astro code to use new `codeToHtml`
* Added changesets
* Added basic test
* Updated tests a bit
Co-authored-by: JuanM04 <JuanM04@users.noreply.github.com>
Diffstat (limited to 'examples/with-markdown-shiki/src')
| -rw-r--r-- | examples/with-markdown-shiki/src/layouts/main.astro | 20 | ||||
| -rw-r--r-- | examples/with-markdown-shiki/src/pages/index.md | 14 | ||||
| -rw-r--r-- | examples/with-markdown-shiki/src/styles/global.css | 54 |
3 files changed, 88 insertions, 0 deletions
diff --git a/examples/with-markdown-shiki/src/layouts/main.astro b/examples/with-markdown-shiki/src/layouts/main.astro new file mode 100644 index 000000000..1c4441a11 --- /dev/null +++ b/examples/with-markdown-shiki/src/layouts/main.astro @@ -0,0 +1,20 @@ +--- +const { content } = Astro.props; +--- + +<html lang={content.lang || 'en'}> + <head> + <meta charset="utf-8" /> + + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + + <title>{content.title}</title> + + <style global> + @import "../styles/global.css"; + </style> + </head> + <body> + <slot /> + </body> +</html> diff --git a/examples/with-markdown-shiki/src/pages/index.md b/examples/with-markdown-shiki/src/pages/index.md new file mode 100644 index 000000000..89e58184f --- /dev/null +++ b/examples/with-markdown-shiki/src/pages/index.md @@ -0,0 +1,14 @@ +--- +title: Shiki demo +layout: ../layouts/main.astro +--- + +# Shiki demo + +```js +var foo = 'bar'; + +function doSomething() { + return foo; +} +``` diff --git a/examples/with-markdown-shiki/src/styles/global.css b/examples/with-markdown-shiki/src/styles/global.css new file mode 100644 index 000000000..e8b9d0314 --- /dev/null +++ b/examples/with-markdown-shiki/src/styles/global.css @@ -0,0 +1,54 @@ +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::selection, +code::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + pre, + code { + text-shadow: none; + } +} + +pre { + margin: 0.5rem 0 16px; + padding: 0.8rem 1rem 0.9rem; + overflow: auto; + background: #282a36; + border-radius: 4px; +} + +:not(pre) > code { + padding: 0.1em 0.3em; + color: #db4c69; + background: #f9f2f4; + border-radius: 0.3em; + white-space: pre-wrap; +} + +body { + max-width: 900px; + margin: auto; +} |