mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 06:03:22 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

demos: move shiki to worker

Browse Source
This commit is contained in:
Philipp Kühn 2021-09-14 22:28:49 +02:00
parent d9bf3eb04a
commit 53e8ba1b7b
2 changed files with 102 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
demos/preview/Shiki.vue
View File

@ -4,18 +4,7 @@
</template>
<script>
import * as shiki from 'shiki'
import onigasm from 'shiki/dist/onigasm.wasm?url'
import theme from 'shiki/themes/material-darker.json'
import langHTML from 'shiki/languages/html.tmLanguage.json'
import langJS from 'shiki/languages/javascript.tmLanguage.json'
import langJSX from 'shiki/languages/jsx.tmLanguage.json'
import langTS from 'shiki/languages/typescript.tmLanguage.json'
import langTSX from 'shiki/languages/tsx.tmLanguage.json'
import langVueHTML from 'shiki/languages/vue-html.tmLanguage.json'
import langVue from 'shiki/languages/vue.tmLanguage.json'
import langCSS from 'shiki/languages/css.tmLanguage.json'
import langSCSS from 'shiki/languages/scss.tmLanguage.json'
import Worker from './shiki.worker?worker'
export default {
props: {
@ -32,6 +21,7 @@ export default {
data() {
return {
worker: new Worker(),
html: null,
highlighter: window?.highlighter,
}
@ -55,88 +45,19 @@ export default {
methods: {
render() {
try {
requestAnimationFrame(() => {
this.html = this.highlighter?.codeToHtml(this.code, this.language)
})
} catch {
console.warn(`[shiki]: missing language: ${this.language}`)
}
},
async initHighlighter() {
if (window.highlighter) {
return
}
const arrayBuffer = await fetch(onigasm).then(response => response.arrayBuffer())
shiki.setOnigasmWASM(arrayBuffer)
const highlighter = await shiki.getHighlighter({
theme,
langs: [
{
id: 'html',
scopeName: langHTML.scopeName,
grammar: langHTML,
embeddedLangs: ['javascript', 'css'],
},
{
id: 'javascript',
scopeName: langJS.scopeName,
grammar: langJS,
aliases: ['js'],
},
{
id: 'jsx',
scopeName: langJSX.scopeName,
grammar: langJSX,
},
{
id: 'typescript',
scopeName: langTS.scopeName,
grammar: langTS,
aliases: ['ts'],
},
{
id: 'tsx',
scopeName: langTSX.scopeName,
grammar: langTSX,
},
{
id: 'vue-html',
scopeName: langVueHTML.scopeName,
grammar: langVueHTML,
embeddedLangs: ['vue', 'javascript'],
},
{
id: 'vue',
scopeName: langVue.scopeName,
grammar: langVue,
embeddedLangs: ['json', 'markdown', 'pug', 'haml', 'vue-html', 'sass', 'scss', 'less', 'stylus', 'postcss', 'css', 'typescript', 'coffee', 'javascript'],
},
{
id: 'css',
scopeName: langCSS.scopeName,
grammar: langCSS,
},
{
id: 'scss',
scopeName: langSCSS.scopeName,
grammar: langSCSS,
embeddedLangs: ['css'],
},
],
this.worker.postMessage({
code: this.code,
language: this.language,
})
window.highlighter = highlighter
this.highlighter = highlighter
},
},
created() {
this.initHighlighter()
this.worker.addEventListener('message', event => {
const { html } = event.data
this.html = html
})
},
}
</script>

92
demos/preview/shiki.worker.js Normal file
View File

@ -0,0 +1,92 @@
import * as shiki from 'shiki'
import onigasm from 'shiki/dist/onigasm.wasm?url'
import theme from 'shiki/themes/material-darker.json'
import langHTML from 'shiki/languages/html.tmLanguage.json'
import langJS from 'shiki/languages/javascript.tmLanguage.json'
import langJSX from 'shiki/languages/jsx.tmLanguage.json'
import langTS from 'shiki/languages/typescript.tmLanguage.json'
import langTSX from 'shiki/languages/tsx.tmLanguage.json'
import langVueHTML from 'shiki/languages/vue-html.tmLanguage.json'
import langVue from 'shiki/languages/vue.tmLanguage.json'
import langCSS from 'shiki/languages/css.tmLanguage.json'
import langSCSS from 'shiki/languages/scss.tmLanguage.json'
let highlighter = null
async function init() {
if (highlighter) {
return highlighter
}
const arrayBuffer = await fetch(onigasm).then(response => response.arrayBuffer())
shiki.setOnigasmWASM(arrayBuffer)
highlighter = await shiki.getHighlighter({
theme,
langs: [
{
id: 'html',
scopeName: langHTML.scopeName,
grammar: langHTML,
embeddedLangs: ['javascript', 'css'],
},
{
id: 'javascript',
scopeName: langJS.scopeName,
grammar: langJS,
aliases: ['js'],
},
{
id: 'jsx',
scopeName: langJSX.scopeName,
grammar: langJSX,
},
{
id: 'typescript',
scopeName: langTS.scopeName,
grammar: langTS,
aliases: ['ts'],
},
{
id: 'tsx',
scopeName: langTSX.scopeName,
grammar: langTSX,
},
{
id: 'vue-html',
scopeName: langVueHTML.scopeName,
grammar: langVueHTML,
embeddedLangs: ['vue', 'javascript'],
},
{
id: 'vue',
scopeName: langVue.scopeName,
grammar: langVue,
embeddedLangs: ['json', 'markdown', 'pug', 'haml', 'vue-html', 'sass', 'scss', 'less', 'stylus', 'postcss', 'css', 'typescript', 'coffee', 'javascript'],
},
{
id: 'css',
scopeName: langCSS.scopeName,
grammar: langCSS,
},
{
id: 'scss',
scopeName: langSCSS.scopeName,
grammar: langSCSS,
embeddedLangs: ['css'],
},
],
})
return highlighter
}
self.addEventListener('message', async event => {
init().then(() => {
const { code, language } = event.data
const html = highlighter.codeToHtml(code, language)
self.postMessage({ code, language, html })
})
})