gistfile1.txt

//FIXME: `--`.
function Strikethrough(props) {
	const x1 = "~".length
	const x2 = props.children.length - "~".length
	if (props.renderMarkup) {
		return (
			<strike className={props.renderSemanticClasses ? "strikethrough" : null}>
				{props.children.slice(x1, x2)}
			</strike>
		)
	}
	return (
		<strike className="m-x:0.1 c:gray-400">
			{!props.readOnly && (
				<span className="c:blue-a200">
					{props.children.slice(0, x1)}
				</span>
			)}
			{/* <span style={{ background: "linear-gradient(transparent 0.65em, hsl(var(--gray-400)) calc(var(--fs) * var(--lh) / 2), hsl(var(--gray-400)) calc(var(--fs) * var(--lh) / 2 + 2px), transparent calc(var(--fs) * var(--lh) / 2 + 2px)) center / 100% 1em" }}> */}
			<span className="m-x:-0.1" style={{ WebkitBoxDecorationBreak: "clone", boxDecorationBreak: "clone", background: "linear-gradient(transparent calc(0.5875em - 1px), hsl(var(--blue-a200)) calc(0.5875em - 1px), hsl(var(--blue-a200)) calc(0.5875em + 1px), transparent calc(0.5875em + 1px)) center / 100% 1em" }}>
				{props.children.slice(x1, x2)}
			</span>
			{!props.readOnly && (
				<span className="c:blue-a200">
					{props.children.slice(x2)}
				</span>
			)}
		</strike>
	)
}

// FIXME: `++`.
function Highlight(props) {
	const x1 = "=".length
	const x2 = props.children.length - "=".length
	if (props.renderMarkup) {
		return (
			<mark className={props.renderSemanticClasses ? "highlight" : null}>
				{props.children.slice(x1, x2)}
			</mark>
		)
	}
	return (
		<mark className="p-b:0.1 b:yellow-100">
			{!props.readOnly && (
				<span className="c:brown">
					{props.children.slice(0, x1)}
				</span>
			)}
			{props.children.slice(x1, x2)}
			{!props.readOnly && (
				<span className="c:brown">
					{props.children.slice(x2)}
				</span>
			)}
		</mark>
	)
}