import React from 'react'
import styled from 'styled-components'

import { marked } from 'marked';

import 'highlight.js/styles/default.css'
import 'highlight.js/styles/github.css'

const Viewer = styled.div`
    background:#fff!important;
    h1, h2, h3, h4, h5, h6 , p { margin : 0 ; }
    h1 { font-size:32px; }
    h2 { font-size:24px; }
    h3 { font-size:18.72px; }
    h4 { font-size:16px; }
    h5 { font-size:13.28px; }
    h6 { font-size:12px; }
    p , code , li , th , tr { color : #333; }
    ul { list-style-type: disc; }
    ol { list-style-type: decimal; }
    ul ul { list-style-type: circle; }
    ul ul ul { list-style-type: square; }
    table th, table tr , table td {
        border: 1px solid #dfe2e5;
        padding: 6px 13px;
    }
    table thead th { background-color: #F8F8F8; }
    table thead tr { background-color: #ffffff; }
    table tr:nth-child(2n) { background-color: #f8f8f8; }
    code, pre { background-color: #f9f9f9; }
    pre { padding : 8px }
`
marked.setOptions({
    renderer: new marked.Renderer(),
    highlight: function (code, lang) {
        const hljs = require('highlight.js');
        const language = hljs.getLanguage(lang) ? lang : 'plaintext';
        return hljs.highlight(code, { language }).value;
    },
    langPrefix: 'hljs language-', // highlight.js css expects a top-level 'hljs' class.
    pedantic: false,
    gfm: true,
    breaks: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    xhtml: false
});

const CodeViewer = (props: any) => {
    const { code } = props
    if (!code) return <span></span>
    return (
        <Viewer
            className="hljs"
            dangerouslySetInnerHTML={{ __html: marked.parse(code) }}
        />
    )
}


export default CodeViewer