Skip to content

Instantly share code, notes, and snippets.

@m1guelpf
Created Oct 5, 2020
Embed
What would you like to do?
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
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment