pre {
  overflow-x: auto;
}

.highlight pre {
  background: none !important;
}

.codeblock {
  position: relative;
  background-color: var(--codeblock-bg-color);
  width: 100%;
  padding: var(--element-padding);
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: var(--radius);
  border: var(--border-width) var(--border-style) var(--border-color);
  font-size: var(--code-block-font-size);
}

.codeblock::before {
  font-family: var(--code-font-family);
  content: attr(data-lang);
  position: absolute;
  color: var(--heading1-color);
  right: 5px;
  top: 0px;
  font-size: var(--code-block-font-size);
}

code {
  font-family: var(--code-font-family);
}

:not(pre) > code {
  color: var(--inline-code-color);
  background-color: var(--inline-code-bg-color);
  padding: 5px;
  border-radius: 2px;
  font-size: var(--code-block-font-size);
}