Update Code.svelte

This commit is contained in:
2024-06-28 17:37:38 +09:00
committed by GitHub
parent 81fb86fa5d
commit 2f623dd340

View File

@@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import { Highlight } from 'svelte-highlight' import { HighlightAuto , LineNumbers } from 'svelte-highlight'
import flourite from 'flourite'
// Import both dark and light styles // Import both dark and light styles
import { github, githubDark } from 'svelte-highlight/styles/index' import { github, githubDark } from 'svelte-highlight/styles/index'
@@ -11,99 +10,15 @@
// Copy function for the code block // Copy function for the code block
import copy from 'copy-to-clipboard' import copy from 'copy-to-clipboard'
// Import all supported languages
import {
javascript,
python,
typescript,
ruby,
go,
java,
sql,
shell,
php,
plaintext,
yaml,
type LanguageType
} from 'svelte-highlight/languages/index'
import 'katex/contrib/mhchem' import 'katex/contrib/mhchem'
import renderMathInElement from 'katex/contrib/auto-render' import renderMathInElement from 'katex/contrib/auto-render'
export const type: 'code' = 'code' export const type: 'code' = 'code'
export const raw: string = '' export const raw: string = ''
export const codeBlockStyle: 'indented' | undefined = undefined export const codeBlockStyle: 'indented' | undefined = undefined
export let lang: string | undefined
export let text: string export let text: string
let renderedMath: string | undefined; let renderedMath: string | undefined;
// if ( text.startsWith('\\[') ) {
// let dummy = document.createElement("div")
// dummy.textContent = text;
// renderMathInElement(dummy, {
// delimiters: [
// {left: '\\(', right: '\\)', display: false},
// {left: '\\[', right: '\\]', display: true}
// ],
// throwOnError : true,
// })
// renderedMath = dummy.innerHTML;
// dummy.remove();
// }
// Map lang string to LanguageType
let language: LanguageType<string>
// If no language is set, try to detect it using flourite
if (!lang) {
lang = flourite(text, { shiki: true }).language
}
switch (lang) {
case 'js':
case 'javascript':
language = javascript
break
case 'py':
case 'python':
language = python
break
case 'ts':
case 'typescript':
language = typescript
break
case 'rb':
case 'ruby':
language = ruby
break
case 'go':
case 'golang':
language = go
break
case 'java':
language = java
break
case 'sql':
language = sql
break
case 'sh':
case 'shell':
case 'bash':
case 'console':
case 'shellscript':
case 'zsh':
language = shell
break
case 'php':
language = php
break
case 'yaml':
case 'yml':
language = yaml
break
default:
language = plaintext
}
// For copying code - reference: https://vyacheslavbasharov.com/blog/adding-click-to-copy-code-markdown-blog // For copying code - reference: https://vyacheslavbasharov.com/blog/adding-click-to-copy-code-markdown-blog
const copyFunction = (event) => { const copyFunction = (event) => {
@@ -140,6 +55,6 @@
{:else} {:else}
<div class="code-block is-relative"> <div class="code-block is-relative">
<button class="button is-light is-outlined is-small p-2" on:click={copyFunction}>Copy</button> <button class="button is-light is-outlined is-small p-2" on:click={copyFunction}>Copy</button>
<Highlight code={text} {language} /> <HighlightAuto code={text} {language} />
</div> </div>
{/if} {/if}