prism-fixes.js

export const fixSyntax = (props, lang) => {
	switch (lang) {
		case 'php':
			props = fixPHP(props)
			break

		case 'sql':
			props = fixSQL(props)
			break

		case 'json':
			props = fixJSON(props)
			break

		case 'js':
			props = fixJS(props)
			break

		case 'html':
			props = fixHTML(props)
			break

		case 'jsx':
			props = fixHTML(fixJS(props))
			break
	}

	return props
}

const fixPHP = props => {
	if (props.className.includes('keyword') && ['use', 'new'].includes(props.children)) props.className = props.className.replace('keyword', 'constant')
	if (['fn', 'function'].includes(props.children.trim())) props.className = props.className.replace('plain', 'operator').replace('keyword', 'operator')
	if (props.className.includes('variable')) {
		props.children = (
			<span key={props.key}>
				<span className="token variable-dollar">$</span>
				<span {...{ key: undefined, ...props, children: props.children.substr(1) }} />
			</span>
		)
	}

	return props
}

const fixJSON = props => {
	if (props.className.includes('operator') && props.children.trim().length > 1) props.className = props.className.replace('operator', 'keyword')
	if ((props.className.includes('property') || props.className.includes('string')) && props.children.includes('"')) {
		props.children = (
			<span key={props.key}>
				<span className="token operator">"</span>
				<span {...{ key: undefined, ...props, children: props.children.substr(1).substr(0, props.children.length - 2) }} />
				<span className="token operator">"</span>
			</span>
		)
	}

	return props
}

const fixSQL = props => {
	if (props.className.includes('operator') && props.children.trim().length > 1) props.className = props.className.replace('operator', 'keyword')
	if (props.children.trim().toLowerCase() == 'null') props.className = props.className.replace('boolean', 'keyword')

	return props
}

const fixJS = props => {
	if (props.className.includes('punctuation') && ['(', ')'].includes(props.children)) props.className = props.className + ' bracket'
	if (props.className.includes('keyword') && ['if', 'else'].includes(props.children)) props.className = props.className + ' conditional'
	if (props.className.includes('keyword') && props.children === 'this') props.className = props.className + ' this'

	return props
}

const fixHTML = props => {
	if (props.className.includes('language-javascript')) {
		props.children = <span {...{ key: undefined, ...fixJS(props) }} />
	}

	return props
}