diff options
author | 2021-05-27 13:54:38 -0400 | |
---|---|---|
committer | 2021-05-27 13:54:38 -0400 | |
commit | dd7cc798e04897ece8b280f9145cfa6789e8501e (patch) | |
tree | deca42114ab42c7202e24f66a07392edccf4bc89 /examples/astro-markdown | |
parent | 3dc141b86840963b8a313178419b2a36306098c9 (diff) | |
download | astro-dd7cc798e04897ece8b280f9145cfa6789e8501e.tar.gz astro-dd7cc798e04897ece8b280f9145cfa6789e8501e.tar.zst astro-dd7cc798e04897ece8b280f9145cfa6789e8501e.zip |
Fix codeblocks in markdown components (#264)
* Fix codeblocks in markdown components
* Debugging
* More debugging
* remove extra debugging stuff
Diffstat (limited to 'examples/astro-markdown')
-rw-r--r-- | examples/astro-markdown/astro.config.mjs | 3 | ||||
-rw-r--r-- | examples/astro-markdown/public/styles/global.scss | 6 | ||||
-rw-r--r-- | examples/astro-markdown/public/styles/prism.scss | 228 | ||||
-rw-r--r-- | examples/astro-markdown/src/layouts/main.astro | 3 | ||||
-rw-r--r-- | examples/astro-markdown/src/pages/index.astro | 12 | ||||
-rw-r--r-- | examples/astro-markdown/src/pages/other.md | 18 |
6 files changed, 268 insertions, 2 deletions
diff --git a/examples/astro-markdown/astro.config.mjs b/examples/astro-markdown/astro.config.mjs index e73531d1a..a66babaf3 100644 --- a/examples/astro-markdown/astro.config.mjs +++ b/examples/astro-markdown/astro.config.mjs @@ -2,5 +2,6 @@ export default { extensions: { '.jsx': 'react', '.tsx': 'preact', - } + }, + public: './public' }; diff --git a/examples/astro-markdown/public/styles/global.scss b/examples/astro-markdown/public/styles/global.scss new file mode 100644 index 000000000..1eda4646f --- /dev/null +++ b/examples/astro-markdown/public/styles/global.scss @@ -0,0 +1,6 @@ +@use "./prism.scss"; + +body { + max-width: 900px; + margin: auto; +}
\ No newline at end of file diff --git a/examples/astro-markdown/public/styles/prism.scss b/examples/astro-markdown/public/styles/prism.scss new file mode 100644 index 000000000..29a3cf5d8 --- /dev/null +++ b/examples/astro-markdown/public/styles/prism.scss @@ -0,0 +1,228 @@ +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; +} + +/********************************************************* +* Tokens +*/ +.namespace { + opacity: 0.7; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #6a9955; +} + +.token.punctuation { + color: #d4d4d4; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #b5cea8; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #ce9178; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #d4d4d4; + background: rgb(45, 55, 72); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #c586c0; +} + +.token.function { + color: #dcdcaa; +} + +.token.regex, +.token.important, +.token.variable { + color: #d16969; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.constant { + color: #9cdcfe; +} + +.token.class-name { + color: #4ec9b0; +} + +.token.parameter { + color: #9cdcfe; +} + +.token.interpolation { + color: #9cdcfe; +} + +.token.punctuation.interpolation-punctuation { + color: #569cd6; +} + +.token.boolean { + color: #569cd6; +} + +.token.property { + color: #9cdcfe; +} + +.token.selector { + color: #d7ba7d; +} + +.token.tag { + color: #569cd6; +} + +.token.attr-name { + color: #9cdcfe; +} + +.token.attr-value { + color: #ce9178; +} + +.token.entity { + color: #4ec9b0; + cursor: unset; +} + +.token.namespace { + color: #4ec9b0; +} + +/********************************************************* +* Language Specific +*/ +pre[class*='language-javascript'], +code[class*='language-javascript'] { + color: #4ec9b0; +} + +pre[class*='language-css'], +code[class*='language-css'] { + color: #ce9178; +} + +pre[class*='language-html'], +code[class*='language-html'] { + color: #d4d4d4; +} + +.language-html .token.punctuation { + color: #808080; +} + +/********************************************************* +* Line highlighting +*/ +pre[data-line] { + position: relative; +} + +pre > code { + position: relative; + z-index: 1; +} + +.line-highlight { + position: absolute; + right: 0; + left: 0; + z-index: 0; + margin-top: 1em; + padding: inherit 0; + line-height: inherit; + white-space: pre; + background: #f7ebc6; + box-shadow: inset 5px 0 0 #f7d87c; + pointer-events: none; +} + +pre[class*='language-bash'] .token.function { + color: #d4d4d4; +} +.token.comment { + color: #fff7; +} diff --git a/examples/astro-markdown/src/layouts/main.astro b/examples/astro-markdown/src/layouts/main.astro index bd7e96adf..61326cc5c 100644 --- a/examples/astro-markdown/src/layouts/main.astro +++ b/examples/astro-markdown/src/layouts/main.astro @@ -4,9 +4,10 @@ export let content; <html> <head> + <meta charset="utf-8"> <title>{content.title}</title> + <link rel="stylesheet" href="/styles/global.css"> </head> - <body> <slot/> </body> diff --git a/examples/astro-markdown/src/pages/index.astro b/examples/astro-markdown/src/pages/index.astro index e05db0155..b46f3698f 100644 --- a/examples/astro-markdown/src/pages/index.astro +++ b/examples/astro-markdown/src/pages/index.astro @@ -21,6 +21,8 @@ const items = ['A', 'B', 'C']; The best part? It comes with all the Astro features you expect. + [Other example](./other) + ## Embed framework components <ReactCounter:visible /> @@ -40,5 +42,15 @@ const items = ['A', 'B', 'C']; ### Markdown can be embedded in any child component </ReactCounter:visible> + ## Code + + Should work! + + ```js + import Something from './another'; + + const thing = new Something(); + ``` + </Markdown> </Layout> diff --git a/examples/astro-markdown/src/pages/other.md b/examples/astro-markdown/src/pages/other.md new file mode 100644 index 000000000..2a059e3d1 --- /dev/null +++ b/examples/astro-markdown/src/pages/other.md @@ -0,0 +1,18 @@ +--- +title: Some Markdown Page +layout: ../layouts/main.astro +--- + +# Code + +```js +var foo = 'bar'; + +function doSomething() { + return foo; +} +``` + +# Paragraph + +text here.
\ No newline at end of file |