Split column layout

src/nginxconfig/templates/app.vue

@@ -27,6 +27,8 @@ limitations under the License.
         </Header>
 
         <div class="main container" :style="{ display: ready ? undefined : 'none' }">
+            <div class="columns">
+                <div class="column is-half is-full-mobile is-full-tablet">
                     <h2>Per-website config</h2>
 
                     <div class="tabs">
@@ -53,10 +55,15 @@ limitations under the License.
                     <h2>Global config</h2>
                     <Global :data="global"></Global>
 
-            <h2>Setup and files</h2>
+                    <h2>Setup</h2>
                     <Setup :data="{ domains, global }"></Setup>
+                </div>
 
-            <pre><code>{{ exportData }}</code></pre>
+                <div class="column is-half is-full-mobile is-full-tablet">
+                    <h2>Config files</h2>
+                    <Prism language="json" :code="exportData"></Prism>
+                </div>
+            </div>
         </div>
 
         <Footer :text="i18n.templates.app.oss"></Footer>
@@ -65,6 +72,8 @@ limitations under the License.
 
 <script>
     import clone from 'clone';
+    import Prism from 'vue-prism-component';
+    import 'prismjs/components/prism-json';
     import Header from 'do-vue/src/templates/header';
     import Footer from 'do-vue/src/templates/footer';
     import isChanged from '../util/is_changed';
@@ -79,6 +88,7 @@ limitations under the License.
     export default {
         name: 'App',
         components: {
+            Prism,
             Header,
             Footer,
             Domain,