Question

我正在尝试使用Vue软件包VueHighlightJS在刀片模板视图上显示代码块显示。这是我第一次使用Vue，我曾研究过类似的问题-但仍然无法使代码正常工作。

js / app.js

import Vue from 'vue'

import VueHighlightJS from 'vue-highlight.js';

import 'vue-highlight.js/lib/allLanguages'
import 'highlight.js/styles/tomorrow-night.css';
Vue.use(VueHighlightJS);

Vue.component('block', require('./components/CodeBlock.vue').default);

const app = new Vue({
    el: '#app',
    components: {
        'block': require('./components/CodeBlock.vue'),
    }
    //router: new VueRouter(routes)
})

CodeBlock.vue

<template>
    <div>

        <div>
            <div class="block shadow flex items-center justify-center">
                <highlight-code class="min-w-full" lang="javascript">
                    hgghfgg
                </highlight-code>
            </div>


        </div>
    </div>
</template>

<script>

    export default {

    }
</script>

试图在show.blade.php中显示视图

<head>

    <title>Document</title>
</head>
<body>
    <div id="app">
    <h1>{{ $snippet->title }} </h1>

    <div>{{ $snippet->description }} </div>

    <div>{{ $snippet->code }} </div>

        <block></block>


    @yield('content')
    </div>
</body>
</html>

将Vue组件添加到刀片模板

0 个答案: