update: code block style

This commit is contained in:
radishzzz 2025-03-20 05:31:26 +00:00
parent 1e1519c3c5
commit 9283287442
8 changed files with 49 additions and 78 deletions

View file

@ -35,9 +35,6 @@ export const themeConfig: ThemeConfig = {
secondary: 'oklch(40% 0.005 298)',
// background color
background: 'oklch(96% 0.005 298)',
// code block theme
// available themes: https://shiki.style/themes
codeTheme: 'one-light ',
},
dark: {
// primary color
@ -49,9 +46,6 @@ export const themeConfig: ThemeConfig = {
secondary: 'oklch(77% 0.005 298)',
// background color
background: 'oklch(22% 0.005 298)',
// code block theme
// available themes: https://shiki.style/themes
codeTheme: 'one-dark-pro',
},
},
// COLOR SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END

View file

@ -5,6 +5,7 @@ updated: 2025-03-12
tags: ["Guide"]
draft: true
pin: 1
lang: en
abbrlink: markdown-style-guide
---
@ -118,16 +119,32 @@ we can use 3 backticks ``` in new line and write snippet and close with 3 backti
### Output
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
---
// Your component script here!
import Banner from '../components/Banner.astro';
import ReactPokemonComponent from '../components/ReactPokemonComponent.jsx';
const myFavoritePokemon = [/* ... */];
const { title } = Astro.props;
---
<!-- HTML comments supported! -->
{/* JS comment syntax is also valid! */}
<Banner />
<h1>Hello, world!</h1>
<!-- Use props and other variables from the component script: -->
<p>{title}</p>
<!-- Include other UI framework components with a `client:` directive to hydrate: -->
<ReactPokemonComponent client:visible />
<!-- Mix HTML with JavaScript expressions, similar to JSX: -->
<ul>
{myFavoritePokemon.map((data) => <li>{data.name}</li>)}
</ul>
<!-- Use a template directive to build class names from multiple strings or even objects! -->
<p class:list={["add", "dynamic", {classNames: true}]} />
```
## List Types

View file

@ -82,7 +82,8 @@
.heti p:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)) {
text-align:start
}
/* .heti pre {
.heti pre {
--at-apply: 'bg-primary/3!';
margin-block-start:12px;
margin-block-end:12px;
margin-inline-start:0;
@ -95,20 +96,19 @@
white-space:pre;
word-wrap:normal;
border-radius:4px;
background-color:rgba(0,0,0,.054)
}
@media(prefers-color-scheme:dark) {
.heti pre {
background-color:rgba(255,255,255,.054)
html.dark .heti pre {
--at-apply: 'bg-primary/3!';
}
}.heti pre code {
html.dark .astro-code span {
--at-apply: 'bg-primary/0!';
}
.heti pre code {
margin:0;
padding:0;
border:0;
border-radius:0;
background-color:rgba(0,0,0,0);
color:inherit
} */
}
.heti a,.heti abbr,.heti code,.heti heti-spacing,.heti [lang=en-US] {
letter-spacing:normal
}

View file

@ -20,13 +20,11 @@ export interface ThemeConfig {
primary: string
secondary: string
background: string
codeTheme: string
}
dark: {
primary: string
secondary: string
background: string
codeTheme: string
}
}