@derockdev/discord-components-core/dist/collection/components/discord-code-block/discord-code-block.css

Web components to easily build and display fake Discord messages on your webpages.

/*  .discord-message .discord-message-body .discord-spoiler */

.discord-code-block-pre {
	background-color: #2f3136;
	font-family: 'Consolas', 'Courier New', Courier, monospace;
	margin-top: 0.25rem;
	white-space: pre-wrap;
}

.discord-code-block-pre--multiline {
	display: block;
	margin-bottom: 0.5rem;
	margin-top: 0.25em;
	padding: 0.5em;
	border: 1px solid #202225;
	border-radius: 4px;
	color: #b9bbbe;
	font-size: 0.875rem;
}

.discord-code-block-pre--multiline.hljs {
	background-color: #2f3136;
	color: #b9bbbe;
}

.discord-embed .discord-code-block-pre {
	background-color: #202225;
}

.discord-embed .discord-code-block-pre .hljs {
	background-color: #202225;
}

code.hljs {
	padding: unset !important;
}

/* I dont know what theme discord uses, but i thought this was close enough */
/*!
  Theme: Helios
  Author: Alex Meyer (https://github.com/reyemxela)
  License: ~ MIT (or more permissive) [via base16-schemes-source]
  Maintainer: @highlightjs/core-team
  Version: 2021.09.0
*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#d5d5d5;background:#1d2021}.hljs ::selection,.hljs::selection{background-color:#53585b;color:#d5d5d5}.hljs-comment{color:#6f7579}.hljs-tag{color:#cdcdcd}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#d5d5d5}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#d72638}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#eb8413}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#f19d1a}.hljs-strong{font-weight:700;color:#f19d1a}.hljs-addition,.hljs-code,.hljs-string,.hljs-title.class_.inherited__{color:#88b92d}.hljs-built_in,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp{color:#1ba595}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#1e8bac}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#be4264}.hljs-emphasis{color:#be4264;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#c85e0d}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700}