pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}

code.hljs {
  padding: 3px 5px;
}

:root {
  --hljs-color: #373b41;
  --hljs-background: #fff;
  --hljs-selection-bg: #c5c8c6;
  --hljs-comment: #b4b7b4;
  --hljs-tag: #969896;
  --hljs-operator: #373b41;
  --hljs-bullet: #cc342b;
  --hljs-attr: #f96a38;
  --hljs-title: #fba922;
  --hljs-string: #198844;
  --hljs-function: #3971ed;
  --hljs-keyword: #a36ac7;
  --hljs-meta: #3971ed;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hljs-color: #c5c8c6;
    --hljs-background: #1d1f21;
    --hljs-selection-bg: #373b41;
    --hljs-comment: #969896;
    --hljs-tag: #b4b7b4;
    --hljs-operator: #c5c8c6;
    --hljs-bullet: #cc342b;
    --hljs-attr: #f96a38;
    --hljs-title: #fba922;
    --hljs-string: #198844;
    --hljs-function: #3971ed;
    --hljs-keyword: #a36ac7;
    --hljs-meta: #3971ed;
  }
}

[data-theme="dark"] {
  --hljs-color: #c5c8c6;
  --hljs-background: #1d1f21;
  --hljs-selection-bg: #373b41;
  --hljs-comment: #969896;
  --hljs-tag: #b4b7b4;
  --hljs-operator: #c5c8c6;
  --hljs-bullet: #cc342b;
  --hljs-attr: #f96a38;
  --hljs-title: #fba922;
  --hljs-string: #198844;
  --hljs-function: #3971ed;
  --hljs-keyword: #a36ac7;
  --hljs-meta: #3971ed;
}

/* 共通スタイル */
.hljs {
  color: var(--hljs-color);
  background: var(--hljs-background);
}

.hljs ::selection,
.hljs::selection {
  background-color: var(--hljs-selection-bg);
  color: var(--hljs-color);
}

.hljs-comment {
  color: var(--hljs-comment);
}

.hljs-tag {
  color: var(--hljs-tag);
}

.hljs-operator,
.hljs-punctuation,
.hljs-subst {
  color: var(--hljs-operator);
}

.hljs-operator {
  opacity: .7;
}

.hljs-bullet,
.hljs-deletion,
.hljs-name,
.hljs-selector-tag,
.hljs-template-variable,
.hljs-variable {
  color: var(--hljs-bullet);
}

.hljs-attr,
.hljs-link,
.hljs-literal,
.hljs-number,
.hljs-symbol,
.hljs-variable.constant_ {
  color: var(--hljs-attr);
}

.hljs-class .hljs-title,
.hljs-title,
.hljs-title.class_ {
  color: var(--hljs-title);
}

.hljs-strong {
  font-weight: 700;
  color: var(--hljs-title);
}

.hljs-addition,
.hljs-code,
.hljs-string,
.hljs-title.class_.inherited__ {
  color: var(--hljs-string);
}

.hljs-attribute,
.hljs-built_in,
.hljs-doctag,
.hljs-function .hljs-title,
.hljs-keyword.hljs-atrule,
.hljs-quote,
.hljs-regexp,
.hljs-section,
.hljs-title.function_,
.ruby .hljs-property {
  color: var(--hljs-function);
}

.diff .hljs-meta,
.hljs-keyword,
.hljs-template-tag,
.hljs-type {
  color: var(--hljs-keyword);
}

.hljs-emphasis {
  color: var(--hljs-keyword);
  font-style: italic;
}

.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-meta .hljs-string {
  color: var(--hljs-meta);
}

.hljs-meta .hljs-keyword,
.hljs-meta-keyword {
  font-weight: 700;
}