chore: using highlight

This commit is contained in:
wonderlandpark 2021-03-07 12:40:53 +09:00
parent 7ee7e853e7
commit 7ec45c5e4a
5 changed files with 28 additions and 10 deletions

View File

@ -72,7 +72,7 @@ const DeveloperLayout = ({ children, enabled, docs, currentDoc }:DeveloperLayout
}
</div>
</div>
<div className='w-full py-24 lg:pl-60'>
<div className='w-full py-28 lg:pl-60'>
<Container>
{children}
</Container>

View File

@ -848,7 +848,7 @@ kbd {
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
background-color: #2c3035;
background-color: #181c20;
border-radius: 3px;
}
@ -858,13 +858,13 @@ kbd {
.markdown-body pre > code,
.dark .markdown-body pre > code {
padding: 0;
padding: 0 !important;
margin: 0;
font-size: 100%;
word-break: normal;
white-space: pre;
background: transparent;
border: 0;
white-space: pre !important;
background: transparent !important;
border: 0 !important;
}
.markdown-body .highlight {

View File

@ -12,7 +12,7 @@ class MyDocument extends Document {
<Head>
<link
rel='stylesheet'
href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css'
href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/solarized-dark.min.css'
/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js'></script>
<script

View File

@ -15,16 +15,18 @@ const Markdown = dynamic(() => import ('@components/Markdown'))
const docsDir = './api-docs/docs'
const Docs: NextPage<DocsProps> = ({ docs }) => {
const router = useRouter()
const [ document, setDoc ] = useState<DocsData>(null)
const [ document, setDoc ] = useState<DocsData>({ name: 'Init' })
useEffect(() => {
let res = docs?.find(el => el.name === router.query.first)
if(router.query.second) res = res?.list?.find(el => el.name === router.query.second)
setDoc(res)
setTimeout(highlightBlocks, 100)
}, [docs, router.query])
if((!document && document !== null) || router.query.docs?.length > 2) return <NotFound />
useEffect(() => highlightBlocks, [document])
if((!document) || router.query.docs?.length > 2) return <NotFound />
return <DeveloperLayout enabled='docs' docs={docs} currentDoc={(router.query.second || router.query.first) as string}>
<div className='px-2'>
<div className='px-2 no-seg'>
<Markdown text={document?.text} />
</div>
</DeveloperLayout>
@ -65,6 +67,13 @@ export async function getStaticProps () {
}
}
function highlightBlocks() {
const nodes = window.document.querySelectorAll('pre code')
nodes.forEach(el => {
window.hljs.highlightBlock(el)
console.log(el)
})
}
interface DocsProps {
docs: DocsData[]
}

9
types/global.d.ts vendored
View File

@ -1,4 +1,13 @@
import * as Yup from 'yup'
declare global {
interface Window {
hljs: {
initHighlighting(): void
highlightBlock(e: Element): void
}
}
}
declare module 'yup' {
class ArraySchema extends Yup.array {
unique(format?: string): this