1
0
Fork 0
freesewing/sites/shared/components/mdx/highlight.js
2022-11-19 18:11:04 +01:00

46 lines
1.3 KiB
JavaScript

import CopyToClipboard from 'shared/components/copy-to-clipboard'
import StatusCode from './status-code.js'
const names = {
js: 'Javascript',
bash: 'Bash prompt',
sh: 'Shell prompt',
json: 'JSON',
yaml: 'file.yaml',
}
const Highlight = (props) => {
let language = 'txt'
let status = false
if (props.language) language = props.language
if (props.children?.props?.className) {
language = props.children.props.className.split('-').pop()
if (language.indexOf('.') !== -1) {
;[status, language] = language.split('.')
}
}
const preProps = {
className: `language-${language} hljs text-base lg:text-lg whitespace-pre overflow-scroll pr-4`,
}
if (props.raw) preProps.dangerouslySetInnerHTML = { __html: props.raw }
return (
<div className="hljs my-4">
<div
className={`
flex flex-row justify-between items-center
text-xs font-medium text-warning
mt-1 border-b border-neutral-content border-opacity-25
px-4 py-1 mb-2 lg:text-sm
`}
>
<span>{names[language] ? names[language] : language}</span>
{status ? <StatusCode status={status} /> : <CopyToClipboard content={props.children} />}
</div>
<pre {...preProps}>{props.children}</pre>
</div>
)
}
export default Highlight