Improve code highlighting

This commit is contained in:
Tom Moor
2017-10-21 20:30:28 -07:00
parent 91e139e2cc
commit 82fdb2a8bc
5 changed files with 124 additions and 196 deletions

View File

@ -6,11 +6,13 @@ import { color } from 'styles/constants';
import type { Props } from '../types';
export default function Code({ children, node, readOnly, attributes }: Props) {
const language = node.data.get('language') || 'javascript';
return (
<Container>
{readOnly && <CopyButton text={node.text} />}
<Pre>
<code {...attributes}>
<Pre className={`language-${language}`}>
<code {...attributes} className={`language-${language}`}>
{children}
</code>
</Pre>
@ -20,7 +22,7 @@ export default function Code({ children, node, readOnly, attributes }: Props) {
const Pre = styled.pre`
padding: .5em 1em;
background: ${color.smoke};
background: ${color.smokeLight};
border-radius: 4px;
border: 1px solid ${color.smokeDark};