code run
1.0.0
Alat pratinjau pengeditan kode, mirip dengan codepen .
Contoh online: https://wanglin2.github.io/code-run-online/.
Gunakan Skypack untuk mengimpor modul ES langsung di browser Anda
Bangun dengan cepat kode alat pratinjau pengeditan online
Bagaimana cara menguraikan file tunggal dan pratinjau secara manual?
Ajari Anda langkah demi langkah untuk mengimplementasikan tema vscode di editor monako
Mendukung beberapa bahasa preprocessing
Mendukung switching acak beberapa tata letak
Mendukung menambahkan sumber daya css dan js tambahan
Beberapa templat umum bawaan
Mendukung ekspor zip
Pemformatan kode dukungan
Konsol yang indah dan kuat
Mendukung file vue tunggal (2.x, 3.x)
Mendukung porting langsung tema VSCode , dan telah membangun sejumlah besar tema berkualitas tinggi
Dukungan bawaan untuk menyimpan ke Github Gist [GIST API], sangat mudah untuk memodifikasinya untuk menyimpan ke sistem penyimpanan Anda sendiri.
Dukungan bawaan untuk menyimpan perubahan pada URL tanpa Gistub Gist, sehingga Anda dapat dengan mudah berbagi URL dengan orang lain untuk melihatnya.
Dukungan bawaan untuk menghasilkan gambar kode yang indah dan indah seperti karbon
UNPKG dan ImportMap bawaan untuk mendukung penggunaan sintaks modul ES di browser
Mendukung Mode Embed, yang nyaman untuk digunakan di situs web dokumen, membuat contoh dokumen lebih mudah
git clone https://github.com/wanglin2/code-run.git
cd code-run
npm i
npm run serve Pertama -tama konfirmasi jalur dasar yang diterapkan setelah kemasan. Jalur dasar default dari proyek adalah /code-run/ . Jika Anda ingin mengubahnya, Anda dapat memodifikasinya sebagai berikut:
1. Ubah bidang publicPath di file vue.config.js .
2. Ubah bidang base file src/config/index.js .
Mode perutean default adalah hash模式. Jika Anda perlu menggunakan mode history , harap modifikasi bidang routerMode dari file src/config/index.js .
Selain itu, jika ada jalur multi-level dalam mode sejarah, file-file berikut dapat dimodifikasi:
1. Ubah jalur sumber daya js prettier dalam file /public/index.html ;
npm run build Perancah: Vue CLI
Kerangka: Vue 3.X Family Bucket, menggunakan组合式API melalui script setup
Perpustakaan UI: element-plus
Editor Kode: Monaco Editor
Saat ini, ESM didukung dalam JavaScript , TypeScript , CoffeeScript , Vue3 , Vue2 dan mode lainnya. Secara default, jika Anda secara langsung mengimpor modul dengan cara berikut:
import moment from 'moment'Akhirnya itu akan dikonversi menjadi:
import moment from 'https://unpkg.com/moment?module' Yaitu menggunakan UNPKG, tetapi beberapa modul unpkg tidak dapat memperoleh versi ESM , atau versi yang diperoleh secara langsung bukanlah yang kami harapkan. Misalnya, saat mengimpor vue , yang kita butuhkan adalah https://unpkg.com/[email protected]/dist/vue.esm-browser.js , tapi https://unpkg.com/vue?module https://unpkg.com/[email protected]/dist/vue.runtime.esm-bundler.js?module Versi ini tidak dapat dijalankan di browser, sehingga Anda dapat secara manual menambahkan ImportMap untuk mengatur sumber modul impor.
Tutorial ini ditujukan untuk topik migrasi VSCode .
1. Tentukan tema yang ingin Anda tambahkan, pertama-tama instal dan beralih ke tema pada VSCode lokal, lalu tekan F1 atau Command/Control + Shift + P atau klik kanan Command Palette/命令面板, kemudian temukan dan klik Developer:Generate Color Theme From Current Setting/开发人员:使用当前设置生成颜色主题/scripts/vscodeThemes/ VSCode menghasilkan salinan json .
2. Kemudian jalankan perintah npm run convertTheme pada baris perintah, dan tema yang dikonversi akan menjadi output ke direktori proyek /public/themes . Selanjutnya, jalankan perintah npm run createThemeList untuk menghasilkan konfigurasi tema. Selanjutnya, Anda dapat设置->主题设置里看到所有主题，并可以切换使用.
npm run buildConsole : file /public/console/index.js dari proyek yang dikompilasi adalah sintaks ES5 dan output ke compile.js di direktori yang sama. File akan dimuat di iframe pratinjau halaman. Harap jangan memodifikasi file compile.js secara langsung.
npm run buildMonacoWorker : Paket File worker Monaco Editor . Jika versi editor Monaco Editor menggunakan perubahan, itu perlu dikemas ulang.
npm run convertTheme : Mengonversi file tema VSCode ke file tema Monaco Editor .
npm run createThemeList : Secara otomatis menghasilkan file konfigurasi berdasarkan daftar file tema.
npm run buildVueSFCCompiler : paket @vue/compiler-sfc file untuk Vue3 .
Karena proyek ini adalah proyek front-end murni, perlu dikompilasi secara online saat menggunakan bahasa preprocessing atau bahasa yang diperluas seperti less , sass , typescript , dll. Pekerjaan ini diproses oleh kompiler dalam setiap bahasa. Anda dapat menemukan kompiler ini di /public/parses/ Directory. Seiring waktu, mereka pasti akan ketinggalan di belakang versi baru mereka, jadi Anda perlu memperbaruinya secara teratur. Mendapatkan versi browser mereka tidak mudah, jadi saya akan berbagi beberapa pengalaman saya dengan Anda di sini.
less npm i less , dan kemudian temukan less/dist/ direktori di node_modules . Dua file dalam direktori ini berada dalam format umd dan dapat digunakan secara langsung.
sass sass saat ini menggunakan proyek ini sass.js, tetapi proyek ini belum diperbarui selama tiga tahun.
babel babel menyediakan versi browser. Untuk detailnya, silakan merujuk ke dokumen resmi @Babel/Standalone.
typescript typescript langsung npm i typescript , dan kemudian temukan file node_modules/typescript/lib/typescript.js , yang juga mendukung penggunaan langsung pada browser.
coffeescript coffeescript juga langsung npm i coffeescript , dan kemudian temukan node_modules/coffeescript/coffeescript-browser-compiler-legacy/coffeescript.js file, yang mendukung penggunaan langsung pada browser.
livescript Versi browser livescript dapat diunduh langsung dari repositori resminya, tetapi belum diperbarui selama dua tahun.
postcss Anda dapat menggunakan Browserify atau webpack untuk mengemasnya ke dalam file.
stylus belum menemukan versi browser atau kompilasi telah berhasil. Teman -teman yang tahu dipersilakan untuk menyebutkan issue .
Proyek ini memiliki beberapa templat kode yang umum digunakan secara bawaan, yang dapat ditambahkan atau dikurangi sesuai kebutuhan. File konfigurasi template ada di src/config/templates.js .
Proyek ini memiliki beberapa templat tata letak halaman yang umum digunakan. Jika tidak memenuhi kebutuhan Anda, Anda dapat menambahkan tata letak baru. Satu tata letak adalah vue单文件. Anda dapat menemukan semua tata letak di src/pages/edit/layouts/ direktori. Setiap tata letak sebenarnya untuk menentukan cara menampilkan tiga bagian编辑器,控制台, dan预览.编辑器mencakup empat editor: js , css , html , dan vue Anda dapat mengonfigurasi mana yang akan ditampilkan, pesanan, apakah seret diperbolehkan, dll. Tata letak yang baru ditambahkan juga perlu ditempatkan di direktori ini.
Selanjutnya, ambil vue单文件的布局sebagai contoh. Pertama, tentukan detail tata letaknya. Kami ingin menampilkan editor vue di sebelah kiri, dan menampilkan预览dan控制台di sebelah kanan. Modul预览diperluas secara default, dan控制台diminimalkan secara default:
1. Pertama kami membuat VueSFC.vue di direktori layouts .
2. Ubah file src/config/constants.js , perkenalkan komponen, dan tambahkan tata letak ke layoutList dan konfigurasi layoutMap :
import VueSFC from '../pages/edit/layouts/VueSFC.vue'
export const layoutList = [
// ...
{
name : 'Vue单文件' ,
value : 'vue' ,
}
]
export const layoutMap = {
// ...
vue : VueSFC
} Anda dapat menambahkan gambar pratinjau tata letak, letakkan di src/assets/layoutImgs/ direktori, kemudian impor di file constants.js , dan akhirnya tambahkan dalam konfigurasi previewImgMap .
Setelah memodifikasi dengan cara ini, Anda dapat melihat opsi Vue单文件yang baru ditambahkan dalam daftar drop-down布局设置di fungsi设置halaman. Selanjutnya, tingkatkan konten VueSFC.vue .
3. Anda dapat merujuk pada konten struktur tata letak lainnya dan menyalinnya untuk memodifikasinya. Konten akhir harus sebagai berikut:
< template >
<!-- 该容器的直接DragItem直接数量为2，方向水平排列，第一个DragItem直接允许缩小到0，第二个DragItem组件最小允许缩小到20px -->
< Drag :number = " 2 " dir = " h " :config = " [{ min: 0 }, { min: 20 }] " >
<!-- 编辑器块，索引为0，禁止缩放该块，隐藏拖动条 -->
< DragItem :index = " 0 " :disabled = " true " :showTouchBar = " false " >
<!-- 编辑器增加，内部编辑器排列方向为垂直，配置了要显示的编辑器 -->
< Editor dir = " v " :showList = " showList " ></ Editor >
</ DragItem >
<!-- 预览&控制台，索引为1，允许拖动进行缩放 -->
< DragItem :index = " 1 " :disabled = " false " >
<!-- DragItem又嵌套了一个容器组件，该容器的直接DragItem直接数量为2，方向垂直排列，第一个DragItem直接允许缩小到0，第二个DragItem组件默认显示的高度为48px，且最小允许缩小到48px -->
< Drag :number = " 2 " dir = " v " :config = " [{ min: 0 }, { min: 48, default: 48 }] " >
< DragItem
:index = " 0 "
:disabled = " true "
:showTouchBar = " false "
title = "预览"
>
< Preview ></ Preview >
</ DragItem >
< DragItem :index = " 1 " :disabled = " false " title = "控制台" >
< Console ></ Console >
</ DragItem >
</ Drag >
</ DragItem >
</ Drag >
</ template >
< script setup>
import Editor from ' @/components/Editor.vue '
import Preview from ' @/components/Preview.vue '
import Console from ' @/components/Console.vue '
import Drag from ' @/components/Drag.vue '
import DragItem from ' @/components/DragItem.vue '
import { reactive } from ' vue '
// 配置只显示vue编辑器
const showList = reactive ([
{
title : ' VUE ' , // 编辑器名称
disableDrag : true , // 禁止拖动进行缩放
showTouchBar : false // 隐藏推动条
}
])
</ script >Komentar telah dijelaskan secara rinci, silakan merujuk ke dokumentasi komponen berikut untuk detailnya.
Komponen ini setara dengan wadah. Setiap wadah akan membuat instantiasi ukuran Resize dan ukuran ukuran ukuran, dan komponen DragItem perlu ditempatkan di dalamnya.
props komponen:
| nama | memperkenalkan | jenis | nilai default |
|---|---|---|---|
| dir | Metode pengaturan komponen DragItem di dalam wadah, dengan opsi: h (pengaturan horizontal), v (pengaturan vertikal) | Rangkaian | H |
| nomor | Jumlah komponen DragItem internal | Nomor | 0 |
| konfigurasi | Informasi komponen DragItem internal, jenis array, dan setiap item adalah objek. Untuk properti tertentu, silakan merujuk ke Tabel 1. | Array | [] |
Properti objek setiap item dalam array config :
| nama | memperkenalkan | jenis | nilai default |
|---|---|---|---|
| bawaan | Ukuran yang ditampilkan oleh komponen DragItem dari indeks yang sesuai adalah default. Ketika dir adalah h , itu mengacu pada lebar dan ketika v mengacu pada ketinggian. | Nomor | Semua komponen DragItem di ruang terpisah wadah default |
| Min | Ukuran minimum yang diizinkan untuk ditampilkan oleh komponen DragItem dari indeks yang sesuai. Ketika menyeret terjadi, jika ruang komponen diperas, diizinkan untuk dikompresi ke 0 secara default, yaitu, itu tidak akan ditampilkan sama sekali. Jika properti ini dikonfigurasi, itu tidak akan berubah setelah menyusut ke ukuran yang dikonfigurasi. | Nomor | 0 |
| Max | Ukuran maksimum yang diizinkan untuk ditampilkan oleh komponen DragItem dari indeks yang sesuai. Ketika menyeret terjadi, jika ruang komponen meningkat, default akan ditingkatkan ke ukuran maksimum yang diizinkan. Jika properti ini dikonfigurasi, itu tidak akan berubah setelah meningkat ke ukuran yang dikonfigurasi. | Nomor | 0 |
Komponen ini mewakili blok yang dapat diseret yang perlu ditempatkan di bawah komponen Drag untuk melewati konten yang perlu benar -benar ditampilkan melalui slot . Wadah Drag dapat bersarang di komponen DragItem .
props komponen:
| nama | memperkenalkan | jenis | nilai default |
|---|---|---|---|
| dengan disabilitas | Menyeret dilarang | Boolean | PALSU |
| Touchbarsize | Ukuran drag bar, saat dir h , mengacu pada lebar, dan ketika v adalah v , mengacu pada ketinggian | Nomor | 20 |
| indeks | Indeks komponen ini dalam daftar komponen DragItem dalam wadah, mulai dari 0 | Nomor | 0 |
| showtouchbar | Apakah akan menampilkan drag bar | Boolean | BENAR |
| judul | judul | Rangkaian | |
| Bersembunyi | Apakah akan menyembunyikan komponen | Boolean | PALSU |
Komponen ini saat ini berisi empat editor: js , css , html , dan vue , yang dapat mengontrol mana yang ditampilkan dan bagaimana mereka diatur.
props komponen:
| nama | memperkenalkan | jenis | nilai default |
|---|---|---|---|
| Bersembunyi | Apakah akan menyembunyikan editor | Boolean | PALSU |
| dir | Arah pengaturan, v (vertikal), h (horizontal) | Rangkaian | H |
| Daftar Pameran | Daftar editor yang akan ditampilkan, jenis array, setiap item dapat berupa angka atau objek, lihat Tabel 2 | Array | ['Html', 'css', 'js'] |
Setiap item dalam array showList dapat berupa string, dengan nilai opsional: HTML , CSS , JS , VUE , mewakili empat editor, dan menampilkan mana yang dikonfigurasi.
Jika Anda perlu mengonfigurasi beberapa properti, seperti apakah akan mengizinkan editor untuk menyeret, dll., Properti yang dapat dikonfigurasi adalah sebagai berikut:
| nama | memperkenalkan | jenis | nilai default |
|---|---|---|---|
| judul | Nama Editor, Opsional: HTML , CSS , JS , VUE | Rangkaian | |
| DisabledRag | Apakah dilarang menyeret dan memperbesar editor | Boolean | |
| showtouchbar | Apakah akan menampilkan bilah push untuk editor ini | Boolean |
1. Guitas Fungsi Gambar Kode Tinggi gambar yang dihasilkan sesekali melebihi ketinggian sebenarnya dari kode, dan belum ada alasan atau solusi mendasar yang telah ditemukan. Salah satu metode opsional memberikan fungsi pemangkasan gambar setelah menghasilkan gambar.
2. Dalam kasus yang jarang terjadi, masalah topik tidak berlaku akan terjadi.
Bagian kompilasi dari bahasa preprocessing/extended dalam proyek ini dan beberapa detail lainnya merujuk pada implementasi codepan proyek.
Mit
