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> </div>
<div className='w-full py-24 lg:pl-60'> <div className='w-full py-28 lg:pl-60'>
<Container> <Container>
{children} {children}
</Container> </Container>

View File

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

View File

@ -12,7 +12,7 @@ class MyDocument extends Document {
<Head> <Head>
<link <link
rel='stylesheet' 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 src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js'></script>
<script <script

View File

@ -15,16 +15,18 @@ const Markdown = dynamic(() => import ('@components/Markdown'))
const docsDir = './api-docs/docs' const docsDir = './api-docs/docs'
const Docs: NextPage<DocsProps> = ({ docs }) => { const Docs: NextPage<DocsProps> = ({ docs }) => {
const router = useRouter() const router = useRouter()
const [ document, setDoc ] = useState<DocsData>(null) const [ document, setDoc ] = useState<DocsData>({ name: 'Init' })
useEffect(() => { useEffect(() => {
let res = docs?.find(el => el.name === router.query.first) let res = docs?.find(el => el.name === router.query.first)
if(router.query.second) res = res?.list?.find(el => el.name === router.query.second) if(router.query.second) res = res?.list?.find(el => el.name === router.query.second)
setDoc(res) setDoc(res)
setTimeout(highlightBlocks, 100)
}, [docs, router.query]) }, [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}> 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} /> <Markdown text={document?.text} />
</div> </div>
</DeveloperLayout> </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 { interface DocsProps {
docs: DocsData[] docs: DocsData[]
} }

9
types/global.d.ts vendored
View File

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