44e04a4cef
Also fixes #251 Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/263 Co-authored-by: joostdecock <joost@joost.at> Co-committed-by: joostdecock <joost@joost.at>
56 lines
1.7 KiB
JavaScript
56 lines
1.7 KiB
JavaScript
import React from 'react'
|
|
import { CopyToClipboardButton } from '@freesewing/react/components/CopyToClipboardButton'
|
|
|
|
const defaultTitles = {
|
|
js: 'Javascript',
|
|
bash: 'Bash commands',
|
|
sh: 'Shell commands',
|
|
json: 'JSON',
|
|
yaml: 'YAML',
|
|
}
|
|
|
|
/**
|
|
* A React component to highlight code
|
|
*
|
|
* @params {object} props - All React props
|
|
* @params {string} language - The language to highlight
|
|
* @params {object} children - The React children
|
|
* @params {bool} raw - Set this to true to not escape tags
|
|
* @params {string} title - Title for the highlight
|
|
* @params {string} copy - Content to copy to clipboard
|
|
* @params {bool} noCopy - Do not add copy to clipboard
|
|
*/
|
|
export const Highlight = ({
|
|
language = 'txt',
|
|
children,
|
|
raw = false,
|
|
title = false,
|
|
copy = false,
|
|
noCopy = false,
|
|
}) => {
|
|
if (children?.props?.className) {
|
|
language = children.props.className.split('-').pop()
|
|
}
|
|
|
|
const preProps = {
|
|
className: `language-${language} hljs tw:text-base tw:lg:text-lg tw:whitespace-break-spaces tw:overflow-scroll tw:pr-4`,
|
|
}
|
|
if (raw) preProps.dangerouslySetInnerHTML = { __html: raw }
|
|
|
|
const label = title ? title : defaultTitles[language] ? defaultTitles[language] : language
|
|
|
|
return (
|
|
<div className="hljs tw:my-4">
|
|
<div
|
|
className={`
|
|
tw:flex tw:flex-row tw:justify-between tw:items-center tw:text-xs tw:font-medium tw:text-warning
|
|
tw:mt-1 tw:border-b tw:border-neutral-content tw:border-opacity-25 tw:px-4 tw:py-1 tw:mb-2 tw:lg:text-sm
|
|
`}
|
|
>
|
|
<span>{label}</span>
|
|
{noCopy ? null : <CopyToClipboardButton content={copy ? copy : children} label={label} />}
|
|
</div>
|
|
<pre {...preProps}>{children}</pre>
|
|
</div>
|
|
)
|
|
}
|