หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ทรัพยากรอื่นๆ
ดาวน์โหลด

รหัส

เครื่องมือดูตัวอย่างการแก้ไขรหัสคล้ายกับ codepen

ตัวอย่างออนไลน์: https://wanglin2.github.io/code-run-online/

บทความที่เกี่ยวข้อง

ใช้ Skypack เพื่อนำเข้าโมดูล ES โดยตรงบนเบราว์เซอร์ของคุณ

สร้างเครื่องมือดูตัวอย่างการแก้ไขออนไลน์อย่างรวดเร็ว

จะแยกวิเคราะห์ไฟล์เดียวและดูตัวอย่างด้วยตนเองได้อย่างไร?

สอนคุณทีละขั้นตอนเพื่อใช้ชุดรูปแบบ VSCODE ใน Monaco Editor

ลักษณะ

  • รองรับหลายภาษาการประมวลผลล่วงหน้า

  • รองรับการสลับแบบสุ่มของหลายเลย์เอาต์

  • รองรับการเพิ่มทรัพยากร css และ js เพิ่มเติม

  • เทมเพลตทั่วไปในตัวหลายตัว

  • สนับสนุนการส่งออกของ zip

  • การจัดรูปแบบรหัสสนับสนุน

  • คอนโซลที่สวยงามและทรงพลัง

  • รองรับไฟล์ vue เดียว (2.x, 3.x)

  • รองรับการพอร์ตโดยตรงของชุดรูป VSCode และมีธีมคุณภาพสูงจำนวนมากในตัว

  • การสนับสนุนในตัวเพื่อบันทึกไปยัง GitHub Gist [GIST API] มันง่ายมากที่จะปรับเปลี่ยนเพื่อบันทึกลงในระบบจัดเก็บข้อมูลของคุณเอง

  • การสนับสนุนในตัวเพื่อบันทึกการเปลี่ยนแปลงของ URL โดยไม่มีส่วนสำคัญของ GitHub เพื่อให้คุณสามารถแบ่งปัน URL กับผู้อื่นเพื่อดูได้อย่างง่ายดาย

  • การสนับสนุนในตัวเพื่อสร้างภาพรหัสที่สวยงามและสวยงามเช่นคาร์บอน

  • UNPKG ในตัวและ ImportMap เพื่อรองรับการใช้ไวยากรณ์ของโมดูล ES บนเบราว์เซอร์

  • รองรับโหมดฝังซึ่งสะดวกสำหรับใช้ในเว็บไซต์เอกสารทำให้ตัวอย่างเอกสารง่ายขึ้น

บิลด์ท้องถิ่น 

git clone https://github.com/wanglin2/code-run.git

cd code-run

npm i

npm run serve

หีบห่อ

ปรับเปลี่ยนเส้นทางฐานแอปพลิเคชัน

ก่อนอื่นยืนยันเส้นทางฐานที่ใช้หลังจากบรรจุภัณฑ์ เส้นทางพื้นฐานเริ่มต้นของโครงการคือ /code-run/ หากคุณต้องการเปลี่ยนแปลงคุณสามารถแก้ไขได้ดังนี้:

1. แก้ไขฟิลด์ publicPath ในไฟล์ vue.config.js

2. แก้ไขฟิลด์ base ของไฟล์ src/config/index.js

ปรับเปลี่ยนโหมดการกำหนดเส้นทาง

โหมดการกำหนดเส้นทางเริ่มต้นคือ hash模式หากคุณต้องการใช้โหมด history โปรดแก้ไขฟิลด์ routerMode ของไฟล์ src/config/index.js

นอกจากนี้หากมีเส้นทางหลายระดับในโหมดประวัติไฟล์ต่อไปนี้อาจแก้ไขได้:

1. แก้ไขเส้นทางของทรัพยากร js ที่เกี่ยวข้องกับ prettier ในไฟล์ /public/index.html ;

คำสั่งบรรจุภัณฑ์ 

npm run build

เทคโนโลยีหลักของโครงการ

นั่งร้าน: Vue CLI

Framework: Vue 3.X Family Bucket โดยใช้组合式API ผ่าน script setup

UI Library: element-plus

Code Editor: Monaco Editor

ภาพหน้าจออินเตอร์เฟส

ภาพหน้าจออินเตอร์เฟส 1

ภาพหน้าจออินเตอร์เฟส 2

ภาพหน้าจออินเตอร์เฟส 3

เกี่ยวกับการใช้ ESM

ปัจจุบัน ESM ได้รับการสนับสนุนใน JavaScript , TypeScript , CoffeeScript , Vue3 , Vue2 และโหมดอื่น ๆ โดยค่าเริ่มต้นหากคุณนำเข้าโมดูลโดยตรงด้วยวิธีต่อไปนี้: 

 import moment from 'moment'

ในที่สุดมันจะถูกแปลงเป็น: 

 import moment from 'https://unpkg.com/moment?module'

นั่นคือการใช้ UNPKG แต่โมดูลบางอย่าง unpkg ไม่สามารถรับเวอร์ชัน ESM ได้หรือเวอร์ชันที่ได้รับโดยตรงไม่ใช่สิ่งที่เราคาดหวัง ตัวอย่างเช่นเมื่อนำเข้า vue สิ่งที่เราต้องการคือ https://unpkg.com/[email protected]/dist/vue.esm-browser.js แต่ https://unpkg.com/vue?module ส่งคืนโดยค่าเริ่มต้น https://unpkg.com/[email protected]/dist/vue.runtime.esm-bundler.js?module รุ่นนี้ไม่สามารถทำงานบนเบราว์เซอร์ได้ดังนั้นคุณสามารถเพิ่ม ImportMap ด้วยตนเองเพื่อตั้งค่าแหล่งที่มาของโมดูลนำเข้า

บทช่วยสอนใหม่ในหัวข้อ

บทช่วยสอนนี้มีวัตถุประสงค์เพื่อหัวข้อการโยกย้าย VSCode

1. กำหนดธีมที่คุณต้องการเพิ่มติดตั้งและสลับไปที่ชุดรูปแบบบน VSCode ในท้องถิ่นจากนั้นกด F1 หรือ Command/Control + Shift + P หรือคลิกขวา Command Palette/命令面板จากนั้น VSCode และคลิก Developer:Generate Color Theme From Current Setting/开发人员:使用当前设置生成颜色主题json /scripts/vscodeThemes/

2. จากนั้นเรียกใช้คำสั่ง npm run convertTheme บนบรรทัดคำสั่งและชุดรูปแบบที่แปลงจะถูกส่งไปยังไดเรกทอรีของโครงการ /public/themes จากนั้นเรียกใช้คำสั่ง npm run createThemeList เพื่อสร้างการกำหนดค่าธีม ถัดไปคุณสามารถ设置->主题设置里看到所有主题，并可以切换使用

คำแนะนำคำสั่งที่เกี่ยวข้อง

  • npm run buildConsole : ไฟล์ /public/console/index.js ของโครงการที่รวบรวมคือไวยากรณ์ ES5 และเอาต์พุตเพื่อ compile.js ในไดเรกทอรีเดียวกัน ไฟล์จะถูกโหลดใน iframe ของ Preview Preview โปรดอย่าแก้ไขไฟล์ compile.js โดยตรง

  • npm run buildMonacoWorker : บรรจุไฟล์ worker ของตัวแก้ไข Monaco Editor หากเวอร์ชันของตัวแก้ไข Monaco Editor ใช้การเปลี่ยนแปลงมันจะต้องได้รับการบรรจุใหม่

  • npm run convertTheme : แปลงไฟล์ธีม VSCode เป็นไฟล์ธีม Monaco Editor

  • npm run createThemeList : สร้างไฟล์การกำหนดค่าโดยอัตโนมัติตามรายการไฟล์ธีม

  • npm run buildVueSFCCompiler : package @vue/compiler-sfc สำหรับ Vue3

คู่มือการอัปเดตคอมไพเลอร์

เนื่องจากโครงการนี้เป็นโครงการ front-end ที่บริสุทธิ์จึงจำเป็นต้องรวบรวมออนไลน์เมื่อใช้ภาษาประมวลผลล่วงหน้าหรือภาษาขยายเช่น less , sass , typescript , ฯลฯ งานนี้ถูกประมวลผลโดยคอมไพเลอร์ในแต่ละภาษา คุณสามารถค้นหาคอมไพเลอร์เหล่านี้ได้ใน /public/parses/ ไดเรกทอรี เมื่อเวลาผ่านไปพวกเขาจะล้าหลังเวอร์ชันใหม่ของพวกเขาอย่างแน่นอนดังนั้นคุณต้องอัปเดตเป็นประจำ การรับรุ่นเบราว์เซอร์ของพวกเขาไม่ใช่เรื่องง่ายดังนั้นฉันจะแบ่งปันประสบการณ์เพียงอย่างเดียวของฉันกับคุณที่นี่

  • less

npm i less จากนั้นหา less/dist/ directory ใน node_modules ไฟล์สองไฟล์ในไดเรกทอรีนี้อยู่ในรูปแบบ umd และสามารถใช้งานได้โดยตรง

  • sass

sass กำลังใช้โครงการ sass.js นี้ แต่โครงการนี้ยังไม่ได้รับการปรับปรุงเป็นเวลาสามปี

  • babel

babel ให้รุ่นเบราว์เซอร์ สำหรับรายละเอียดโปรดดูเอกสารอย่างเป็นทางการ @Babel/Standalone

  • typescript

typescript โดยตรง npm i typescript จากนั้นค้นหาไฟล์ node_modules/typescript/lib/typescript.js ซึ่งรองรับการใช้งานโดยตรงบนเบราว์เซอร์

  • coffeescript

coffeescript ยังเป็น npm i coffeescript โดยตรงจากนั้นค้นหา node_modules/coffeescript/coffeescript-browser-compiler-legacy/coffeescript.js ซึ่งรองรับการใช้งานโดยตรงบนเบราว์เซอร์

  • livescript

เวอร์ชันเบราว์เซอร์ของ livescript สามารถดาวน์โหลดได้โดยตรงจากที่เก็บอย่างเป็นทางการ แต่ยังไม่ได้รับการปรับปรุงเป็นเวลาสองปี

  • postcss

คุณสามารถใช้ Browserify หรือ webpack เพื่อจัดทำแพ็คเกจลงในไฟล์

  • อื่น

stylus ยังไม่พบเวอร์ชันเบราว์เซอร์หรือการรวบรวมประสบความสำเร็จ เพื่อนที่รู้ว่ายินดีที่จะพูดถึง issue

เพิ่มเทมเพลตรหัส

โครงการมีเทมเพลตรหัสที่ใช้กันทั่วไปหลายแบบในตัวซึ่งสามารถเพิ่มหรือลดลงได้ตามต้องการ ไฟล์กำหนดค่าเทมเพลตอยู่ใน src/config/templates.js

เพิ่มเทมเพลตเค้าโครงหน้าใหม่

การสอน

โครงการมีเทมเพลตเค้าโครงหน้าเว็บที่ใช้กันทั่วไปหลายแบบในตัว หากไม่ตรงกับความต้องการของคุณคุณสามารถเพิ่มเลย์เอาต์ใหม่ได้ หนึ่งเค้าโครงคือ vue单文件คุณสามารถค้นหาเลย์เอาต์ทั้งหมดใน src/pages/edit/layouts/ Directory แต่ละเค้าโครงมีการกำหนดวิธีการแสดงสามส่วน编辑器控制台และ预览编辑器ประกอบด้วยบรรณาธิการสี่คน: js , css , html และ vue คุณสามารถกำหนดค่าที่จะแสดงคำสั่งซื้อไม่ว่าจะอนุญาตให้ลาก ฯลฯ เลย์เอาต์ที่เพิ่มขึ้นใหม่จะต้องวางไว้ในไดเรกทอรีนี้

จากนั้นใช้ vue单文件的布局เป็นตัวอย่าง ขั้นแรกให้กำหนดรายละเอียดเค้าโครง เราต้องการแสดงตัวแก้ไข vue ทางด้านซ้ายและแสดง预览และ控制台ทางด้านขวา โมดูล预览ถูกขยายโดยค่าเริ่มต้นและ控制台จะลดลงโดยค่าเริ่มต้น:

1. ก่อนอื่นเราสร้าง VueSFC.vue ในไดเรกทอรีเลย์ layouts

2. แก้ไขไฟล์ src/config/constants.js แนะนำส่วนประกอบและเพิ่มเค้าโครงลงในการกำหนดค่า layoutList และ layoutMap : 

 import VueSFC from '../pages/edit/layouts/VueSFC.vue'

export const layoutList = [
	// ...
	{
		name : 'Vue单文件' ,
		value : 'vue' ,
	}
]

export const layoutMap = {
	// ...
	vue : VueSFC
}

คุณสามารถเพิ่มภาพตัวอย่างของเค้าโครงวางไว้ใน src/assets/layoutImgs/ Directory จากนั้นนำเข้าในไฟล์ constants.js และเพิ่มในการกำหนดค่า previewImgMap

หลังจากแก้ไขด้วยวิธีนี้คุณจะเห็นตัวเลือก Vue单文件ที่เพิ่มขึ้นใหม่ในรายการแบบเลื่อนลงของ布局设置ในฟังก์ชัน设置ของหน้า ถัดไปปรับปรุงเนื้อหาของ VueSFC.vue

3. คุณสามารถอ้างถึงเนื้อหาของโครงสร้างเค้าโครงอื่น ๆ และคัดลอกเพื่อแก้ไข เนื้อหาสุดท้ายควรมีดังนี้: 

< 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 >

ความคิดเห็นได้รับการอธิบายอย่างละเอียดโปรดดูเอกสารประกอบส่วนประกอบต่อไปนี้สำหรับรายละเอียด

เอกสารส่วนประกอบที่เกี่ยวข้องกับเค้าโครง

ลากส่วนประกอบ

ส่วนประกอบนี้เทียบเท่ากับคอนเทนเนอร์ แต่ละคอนเทนเนอร์จะยกระดับการลาก Resize ขนาดและปรับขนาดคลาสและส่วนประกอบของ DragItem จะต้องวางไว้ข้างใน

props ส่วนประกอบ:

ชื่อ แนะนำ พิมพ์ ค่าเริ่มต้น
DIR วิธีการจัดเรียงส่วนประกอบ DragItem ภายในคอนเทนเนอร์พร้อมตัวเลือก: H (การจัดเรียงแนวนอน), V (การจัดเรียงแนวตั้ง) สาย ชม.
ตัวเลข จำนวนส่วนประกอบ DragItem ภายใน ตัวเลข 0
การกำหนดค่า ข้อมูลของส่วนประกอบ DragItem ภายในประเภทอาร์เรย์และแต่ละรายการเป็นวัตถุ สำหรับคุณสมบัติเฉพาะโปรดดูที่ตารางที่ 1 อาร์เรย์ -

ตารางที่ 1

คุณสมบัติของวัตถุของแต่ละรายการในอาร์เรย์ config :

ชื่อ แนะนำ พิมพ์ ค่าเริ่มต้น
ค่าเริ่มต้น ขนาดที่แสดงโดยส่วนประกอบ DragItem ของดัชนีที่เกี่ยวข้องคือค่าเริ่มต้น เมื่อ dir เป็น h มันหมายถึงความกว้างและเมื่อ v มันหมายถึงความสูง ตัวเลข ส่วนประกอบ DragItem ทั้งหมดในพื้นที่แยกคอนเทนเนอร์เริ่มต้น
นาที ขนาดต่ำสุดที่อนุญาตให้แสดงโดยส่วนประกอบ DragItem ของดัชนีที่สอดคล้องกัน เมื่อมีการลากเกิดขึ้นหากพื้นที่ส่วนประกอบถูกบีบมันจะได้รับอนุญาตให้บีบอัดเป็น 0 โดยค่าเริ่มต้นนั่นคือมันจะไม่ปรากฏขึ้นเลย หากคุณสมบัตินี้ได้รับการกำหนดค่ามันจะไม่เปลี่ยนแปลงหลังจากลดขนาดเป็นขนาด ตัวเลข 0
สูงสุด ขนาดสูงสุดที่อนุญาตให้แสดงโดยส่วนประกอบ DragItem ของดัชนีที่เกี่ยวข้อง เมื่อการลากเกิดขึ้นหากพื้นที่ส่วนประกอบเพิ่มขึ้นค่าเริ่มต้นจะเพิ่มขึ้นเป็นขนาดสูงสุดที่อนุญาต หากมีการกำหนดค่าคุณสมบัตินี้จะไม่เปลี่ยนแปลงหลังจากเพิ่มขนาดที่กำหนดค่า ตัวเลข 0

ส่วนประกอบ Dragitem

ส่วนประกอบนี้แสดงถึงบล็อกที่แยกออกได้ซึ่งจำเป็นต้องวางไว้ภายใต้องค์ประกอบ Drag เพื่อส่งผ่านเนื้อหาที่ต้องแสดงผ่าน slot จริง คอนเทนเนอร์ Drag สามารถซ้อนกันในส่วนประกอบ DragItem

props ส่วนประกอบ:

ชื่อ แนะนำ พิมพ์ ค่าเริ่มต้น
พิการ ต้องลากต้องห้าม บูลีน เท็จ
touchbarsize ขนาดของแถบลากเมื่อ dir เป็น h หมายถึงความกว้างและเมื่อ v คือ v หมายถึงความสูง ตัวเลข 20
ดัชนี ดัชนีขององค์ประกอบนี้ในรายการส่วนประกอบ DragItem ในคอนเทนเนอร์เริ่มต้นจาก 0 ตัวเลข 0
showtouchbar ไม่ว่าจะแสดงแถบลาก บูลีน จริง
ชื่อ ชื่อ สาย
ซ่อน ไม่ว่าจะซ่อนส่วนประกอบ บูลีน เท็จ

ส่วนประกอบของบรรณาธิการ

ปัจจุบันส่วนประกอบนี้มีบรรณาธิการสี่ตัว ได้แก่ js , css , html และ vue ซึ่งสามารถควบคุมได้ว่าจะมีการแสดงที่ใดและจัดเรียงอย่างไร

props ส่วนประกอบ:

ชื่อ แนะนำ พิมพ์ ค่าเริ่มต้น
ซ่อน ไม่ว่าจะซ่อนบรรณาธิการ บูลีน เท็จ
DIR ทิศทางการจัดเรียง, V (แนวตั้ง), H (แนวนอน) สาย ชม.
รายการโชว์ รายการบรรณาธิการที่จะแสดงประเภทอาร์เรย์แต่ละรายการอาจเป็นตัวเลขหรือวัตถุดูตารางที่ 2 อาร์เรย์ ['HTML', 'CSS', 'JS']

ตารางที่ 2

แต่ละรายการในอาร์เรย์ showList สามารถเป็นสตริงที่มีค่าเสริม: HTML , CSS , JS , VUE , ตัวแทนบรรณาธิการสี่คนและแสดงรายการที่กำหนดค่า

หากคุณต้องการกำหนดค่าคุณสมบัติบางอย่างเช่นว่าจะอนุญาตให้ตัวแก้ไขลาก ฯลฯ คุณสมบัติที่กำหนดค่าได้มีดังนี้:

ชื่อ แนะนำ พิมพ์ ค่าเริ่มต้น
ชื่อ ชื่อบรรณาธิการตัวเลือก: HTML , CSS , JS , VUE สาย
disabledrag ห้ามมิให้ลากและซูมบรรณาธิการ บูลีน
showtouchbar ไม่ว่าจะแสดงแถบพุชสำหรับตัวแก้ไขนี้ บูลีน

ปัญหาที่ไม่ได้รับการแก้ไข

1. สร้างฟังก์ชั่นภาพรหัสความสูงของภาพที่เกิดขึ้นเป็นครั้งคราวเกินความสูงที่แท้จริงของรหัสและยังไม่พบเหตุผลหรือวิธีการแก้ปัญหาพื้นฐาน หนึ่งในวิธีการเสริมให้ฟังก์ชั่นของการครอบตัดภาพหลังจากสร้างภาพ

2. ในบางกรณีปัญหาของหัวข้อที่ไม่มีผลจะเกิดขึ้น

กิตติกรรมประกาศ

ส่วนการรวบรวมของภาษาก่อนการประมวลผล/ขยายในโครงการนี้และรายละเอียดอื่น ๆ บางส่วนอ้างถึงการใช้งานโครงการ Codepan

ใบอนุญาต

มิกซ์

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด