dioxus-code 0.1.1

Syntax-highlighted code blocks for Dioxus.
Documentation
.dxc-system {
  --dxc-light-on: initial;
  --dxc-dark-on: ;
}

@media (prefers-color-scheme: dark) {
  .dxc-system {
    --dxc-light-on: ;
    --dxc-dark-on: initial;
  }
}

.dxc,
.dxc-editor {
  background: var(--dxc-light-on, var(--dxc-light-background,)) var(--dxc-dark-on, var(--dxc-dark-background,));
  --bg: var(--dxc-light-on, var(--dxc-light-var-bg,)) var(--dxc-dark-on, var(--dxc-dark-var-bg,));
  --surface: var(--dxc-light-on, var(--dxc-light-var-surface,)) var(--dxc-dark-on, var(--dxc-dark-var-surface,));
  color: var(--dxc-light-on, var(--dxc-light-color,)) var(--dxc-dark-on, var(--dxc-dark-color,));
  --fg: var(--dxc-light-on, var(--dxc-light-var-fg,)) var(--dxc-dark-on, var(--dxc-dark-var-fg,));
  --accent: var(--dxc-light-on, var(--dxc-light-var-accent,)) var(--dxc-dark-on, var(--dxc-dark-var-accent,));
  --muted: var(--dxc-light-on, var(--dxc-light-var-muted,)) var(--dxc-dark-on, var(--dxc-dark-var-muted,));
}
.dxc .a-at,
.dxc-editor .a-at {
  color: var(--dxc-light-on, var(--dxc-light-a-at-color,)) var(--dxc-dark-on, var(--dxc-dark-a-at-color,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-at-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-at-font-style,));
}
.dxc .a-c,
.dxc-editor .a-c {
  color: var(--dxc-light-on, var(--dxc-light-a-c-color,)) var(--dxc-dark-on, var(--dxc-dark-a-c-color,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-c-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-c-font-style,));
}
.dxc .a-cb,
.dxc-editor .a-cb {
  color: var(--dxc-light-on, var(--dxc-light-a-cb-color,)) var(--dxc-dark-on, var(--dxc-dark-a-cb-color,));
}
.dxc .a-cd,
.dxc-editor .a-cd {
  color: var(--dxc-light-on, var(--dxc-light-a-cd-color,)) var(--dxc-dark-on, var(--dxc-dark-a-cd-color,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-cd-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-cd-font-style,));
}
.dxc .a-ch,
.dxc-editor .a-ch {
  color: var(--dxc-light-on, var(--dxc-light-a-ch-color,)) var(--dxc-dark-on, var(--dxc-dark-a-ch-color,));
}
.dxc .a-cn,
.dxc-editor .a-cn {
  color: var(--dxc-light-on, var(--dxc-light-a-cn-color,)) var(--dxc-dark-on, var(--dxc-dark-a-cn-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-cn-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-cn-font-weight,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-cn-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-cn-font-style,));
}
.dxc .a-co,
.dxc-editor .a-co {
  color: var(--dxc-light-on, var(--dxc-light-a-co-color,)) var(--dxc-dark-on, var(--dxc-dark-a-co-color,));
}
.dxc .a-cs,
.dxc-editor .a-cs {
  color: var(--dxc-light-on, var(--dxc-light-a-cs-color,)) var(--dxc-dark-on, var(--dxc-dark-a-cs-color,));
}
.dxc .a-dr,
.dxc-editor .a-dr {
  color: var(--dxc-light-on, var(--dxc-light-a-dr-color,)) var(--dxc-dark-on, var(--dxc-dark-a-dr-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-dr-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-dr-font-weight,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-dr-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-dr-font-style,));
}
.dxc .a-em,
.dxc-editor .a-em {
  font-style: var(--dxc-light-on, var(--dxc-light-a-em-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-em-font-style,));
}
.dxc .a-ex,
.dxc-editor .a-ex {
  color: var(--dxc-light-on, var(--dxc-light-a-ex-color,)) var(--dxc-dark-on, var(--dxc-dark-a-ex-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-ex-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-ex-font-weight,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-ex-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-ex-font-style,));
}
.dxc .a-f,
.dxc-editor .a-f {
  color: var(--dxc-light-on, var(--dxc-light-a-f-color,)) var(--dxc-dark-on, var(--dxc-dark-a-f-color,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-f-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-f-font-style,));
}
.dxc .a-fb,
.dxc-editor .a-fb {
  color: var(--dxc-light-on, var(--dxc-light-a-fb-color,)) var(--dxc-dark-on, var(--dxc-dark-a-fb-color,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-fb-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-fb-font-style,));
}
.dxc .a-fc,
.dxc-editor .a-fc {
  color: var(--dxc-light-on, var(--dxc-light-a-fc-color,)) var(--dxc-dark-on, var(--dxc-dark-a-fc-color,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-fc-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-fc-font-style,));
}
.dxc .a-fd,
.dxc-editor .a-fd {
  color: var(--dxc-light-on, var(--dxc-light-a-fd-color,)) var(--dxc-dark-on, var(--dxc-dark-a-fd-color,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-fd-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-fd-font-style,));
}
.dxc .a-fm,
.dxc-editor .a-fm {
  color: var(--dxc-light-on, var(--dxc-light-a-fm-color,)) var(--dxc-dark-on, var(--dxc-dark-a-fm-color,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-fm-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-fm-font-style,));
}
.dxc .a-in,
.dxc-editor .a-in {
  color: var(--dxc-light-on, var(--dxc-light-a-in-color,)) var(--dxc-dark-on, var(--dxc-dark-a-in-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-in-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-in-font-weight,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-in-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-in-font-style,));
}
.dxc .a-k,
.dxc-editor .a-k {
  color: var(--dxc-light-on, var(--dxc-light-a-k-color,)) var(--dxc-dark-on, var(--dxc-dark-a-k-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-k-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-k-font-weight,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-k-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-k-font-style,));
}
.dxc .a-kc,
.dxc-editor .a-kc {
  color: var(--dxc-light-on, var(--dxc-light-a-kc-color,)) var(--dxc-dark-on, var(--dxc-dark-a-kc-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-kc-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-kc-font-weight,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-kc-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-kc-font-style,));
}
.dxc .a-kd,
.dxc-editor .a-kd {
  color: var(--dxc-light-on, var(--dxc-light-a-kd-color,)) var(--dxc-dark-on, var(--dxc-dark-a-kd-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-kd-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-kd-font-weight,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-kd-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-kd-font-style,));
}
.dxc .a-ke,
.dxc-editor .a-ke {
  color: var(--dxc-light-on, var(--dxc-light-a-ke-color,)) var(--dxc-dark-on, var(--dxc-dark-a-ke-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-ke-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-ke-font-weight,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-ke-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-ke-font-style,));
}
.dxc .a-kf,
.dxc-editor .a-kf {
  color: var(--dxc-light-on, var(--dxc-light-a-kf-color,)) var(--dxc-dark-on, var(--dxc-dark-a-kf-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-kf-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-kf-font-weight,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-kf-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-kf-font-style,));
}
.dxc .a-ki,
.dxc-editor .a-ki {
  color: var(--dxc-light-on, var(--dxc-light-a-ki-color,)) var(--dxc-dark-on, var(--dxc-dark-a-ki-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-ki-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-ki-font-weight,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-ki-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-ki-font-style,));
}
.dxc .a-km,
.dxc-editor .a-km {
  color: var(--dxc-light-on, var(--dxc-light-a-km-color,)) var(--dxc-dark-on, var(--dxc-dark-a-km-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-km-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-km-font-weight,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-km-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-km-font-style,));
}
.dxc .a-ko,
.dxc-editor .a-ko {
  color: var(--dxc-light-on, var(--dxc-light-a-ko-color,)) var(--dxc-dark-on, var(--dxc-dark-a-ko-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-ko-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-ko-font-weight,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-ko-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-ko-font-style,));
}
.dxc .a-kp,
.dxc-editor .a-kp {
  color: var(--dxc-light-on, var(--dxc-light-a-kp-color,)) var(--dxc-dark-on, var(--dxc-dark-a-kp-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-kp-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-kp-font-weight,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-kp-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-kp-font-style,));
}
.dxc .a-kr,
.dxc-editor .a-kr {
  color: var(--dxc-light-on, var(--dxc-light-a-kr-color,)) var(--dxc-dark-on, var(--dxc-dark-a-kr-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-kr-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-kr-font-weight,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-kr-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-kr-font-style,));
}
.dxc .a-kt,
.dxc-editor .a-kt {
  color: var(--dxc-light-on, var(--dxc-light-a-kt-color,)) var(--dxc-dark-on, var(--dxc-dark-a-kt-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-kt-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-kt-font-weight,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-kt-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-kt-font-style,));
}
.dxc .a-ky,
.dxc-editor .a-ky {
  color: var(--dxc-light-on, var(--dxc-light-a-ky-color,)) var(--dxc-dark-on, var(--dxc-dark-a-ky-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-ky-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-ky-font-weight,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-ky-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-ky-font-style,));
}
.dxc .a-l,
.dxc-editor .a-l {
  color: var(--dxc-light-on, var(--dxc-light-a-l-color,)) var(--dxc-dark-on, var(--dxc-dark-a-l-color,));
}
.dxc .a-m,
.dxc-editor .a-m {
  color: var(--dxc-light-on, var(--dxc-light-a-m-color,)) var(--dxc-dark-on, var(--dxc-dark-a-m-color,));
}
.dxc .a-n,
.dxc-editor .a-n {
  color: var(--dxc-light-on, var(--dxc-light-a-n-color,)) var(--dxc-dark-on, var(--dxc-dark-a-n-color,));
}
.dxc .a-o,
.dxc-editor .a-o {
  color: var(--dxc-light-on, var(--dxc-light-a-o-color,)) var(--dxc-dark-on, var(--dxc-dark-a-o-color,));
}
.dxc .a-p,
.dxc-editor .a-p {
  color: var(--dxc-light-on, var(--dxc-light-a-p-color,)) var(--dxc-dark-on, var(--dxc-dark-a-p-color,));
}
.dxc .a-pb,
.dxc-editor .a-pb {
  color: var(--dxc-light-on, var(--dxc-light-a-pb-color,)) var(--dxc-dark-on, var(--dxc-dark-a-pb-color,));
}
.dxc .a-pd,
.dxc-editor .a-pd {
  color: var(--dxc-light-on, var(--dxc-light-a-pd-color,)) var(--dxc-dark-on, var(--dxc-dark-a-pd-color,));
}
.dxc .a-pp,
.dxc-editor .a-pp {
  color: var(--dxc-light-on, var(--dxc-light-a-pp-color,)) var(--dxc-dark-on, var(--dxc-dark-a-pp-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-pp-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-pp-font-weight,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-pp-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-pp-font-style,));
}
.dxc .a-pr,
.dxc-editor .a-pr {
  color: var(--dxc-light-on, var(--dxc-light-a-pr-color,)) var(--dxc-dark-on, var(--dxc-dark-a-pr-color,));
}
.dxc .a-ps,
.dxc-editor .a-ps {
  color: var(--dxc-light-on, var(--dxc-light-a-ps-color,)) var(--dxc-dark-on, var(--dxc-dark-a-ps-color,));
}
.dxc .a-rp,
.dxc-editor .a-rp {
  color: var(--dxc-light-on, var(--dxc-light-a-rp-color,)) var(--dxc-dark-on, var(--dxc-dark-a-rp-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-rp-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-rp-font-weight,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-rp-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-rp-font-style,));
}
.dxc .a-rx,
.dxc-editor .a-rx {
  color: var(--dxc-light-on, var(--dxc-light-a-rx-color,)) var(--dxc-dark-on, var(--dxc-dark-a-rx-color,));
}
.dxc .a-s,
.dxc-editor .a-s {
  color: var(--dxc-light-on, var(--dxc-light-a-s-color,)) var(--dxc-dark-on, var(--dxc-dark-a-s-color,));
}
.dxc .a-sc,
.dxc-editor .a-sc {
  color: var(--dxc-light-on, var(--dxc-light-a-sc-color,)) var(--dxc-dark-on, var(--dxc-dark-a-sc-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-sc-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-sc-font-weight,));
  font-style: var(--dxc-light-on, var(--dxc-light-a-sc-font-style,)) var(--dxc-dark-on, var(--dxc-dark-a-sc-font-style,));
}
.dxc .a-se,
.dxc-editor .a-se {
  color: var(--dxc-light-on, var(--dxc-light-a-se-color,)) var(--dxc-dark-on, var(--dxc-dark-a-se-color,));
}
.dxc .a-sp,
.dxc-editor .a-sp {
  color: var(--dxc-light-on, var(--dxc-light-a-sp-color,)) var(--dxc-dark-on, var(--dxc-dark-a-sp-color,));
}
.dxc .a-ss,
.dxc-editor .a-ss {
  color: var(--dxc-light-on, var(--dxc-light-a-ss-color,)) var(--dxc-dark-on, var(--dxc-dark-a-ss-color,));
}
.dxc .a-st,
.dxc-editor .a-st {
  font-weight: var(--dxc-light-on, var(--dxc-light-a-st-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-st-font-weight,));
}
.dxc .a-t,
.dxc-editor .a-t {
  color: var(--dxc-light-on, var(--dxc-light-a-t-color,)) var(--dxc-dark-on, var(--dxc-dark-a-t-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-t-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-t-font-weight,));
}
.dxc .a-tb,
.dxc-editor .a-tb {
  color: var(--dxc-light-on, var(--dxc-light-a-tb-color,)) var(--dxc-dark-on, var(--dxc-dark-a-tb-color,));
}
.dxc .a-td,
.dxc-editor .a-td {
  color: var(--dxc-light-on, var(--dxc-light-a-td-color,)) var(--dxc-dark-on, var(--dxc-dark-a-td-color,));
}
.dxc .a-te,
.dxc-editor .a-te {
  color: var(--dxc-light-on, var(--dxc-light-a-te-color,)) var(--dxc-dark-on, var(--dxc-dark-a-te-color,));
}
.dxc .a-tf,
.dxc-editor .a-tf {
  color: var(--dxc-light-on, var(--dxc-light-a-tf-color,)) var(--dxc-dark-on, var(--dxc-dark-a-tf-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-tf-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-tf-font-weight,));
}
.dxc .a-tg,
.dxc-editor .a-tg {
  color: var(--dxc-light-on, var(--dxc-light-a-tg-color,)) var(--dxc-dark-on, var(--dxc-dark-a-tg-color,));
}
.dxc .a-tl,
.dxc-editor .a-tl {
  color: var(--dxc-light-on, var(--dxc-light-a-tl-color,)) var(--dxc-dark-on, var(--dxc-dark-a-tl-color,));
}
.dxc .a-tq,
.dxc-editor .a-tq {
  color: var(--dxc-light-on, var(--dxc-light-a-tq-color,)) var(--dxc-dark-on, var(--dxc-dark-a-tq-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-tq-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-tq-font-weight,));
}
.dxc .a-tr,
.dxc-editor .a-tr {
  color: var(--dxc-light-on, var(--dxc-light-a-tr-color,)) var(--dxc-dark-on, var(--dxc-dark-a-tr-color,));
}
.dxc .a-tt,
.dxc-editor .a-tt {
  color: var(--dxc-light-on, var(--dxc-light-a-tt-color,)) var(--dxc-dark-on, var(--dxc-dark-a-tt-color,));
  font-weight: var(--dxc-light-on, var(--dxc-light-a-tt-font-weight,)) var(--dxc-dark-on, var(--dxc-dark-a-tt-font-weight,));
}
.dxc .a-tu,
.dxc-editor .a-tu {
  color: var(--dxc-light-on, var(--dxc-light-a-tu-color,)) var(--dxc-dark-on, var(--dxc-dark-a-tu-color,));
  text-decoration: var(--dxc-light-on, var(--dxc-light-a-tu-text-decoration,)) var(--dxc-dark-on, var(--dxc-dark-a-tu-text-decoration,));
}
.dxc .a-tx,
.dxc-editor .a-tx {
  text-decoration: var(--dxc-light-on, var(--dxc-light-a-tx-text-decoration,)) var(--dxc-dark-on, var(--dxc-dark-a-tx-text-decoration,));
}
.dxc .a-v,
.dxc-editor .a-v {
  color: var(--dxc-light-on, var(--dxc-light-a-v-color,)) var(--dxc-dark-on, var(--dxc-dark-a-v-color,));
}
.dxc .a-vb,
.dxc-editor .a-vb {
  color: var(--dxc-light-on, var(--dxc-light-a-vb-color,)) var(--dxc-dark-on, var(--dxc-dark-a-vb-color,));
}
.dxc .a-vm,
.dxc-editor .a-vm {
  color: var(--dxc-light-on, var(--dxc-light-a-vm-color,)) var(--dxc-dark-on, var(--dxc-dark-a-vm-color,));
}
.dxc .a-vp,
.dxc-editor .a-vp {
  color: var(--dxc-light-on, var(--dxc-light-a-vp-color,)) var(--dxc-dark-on, var(--dxc-dark-a-vp-color,));
}