code run

corregir

Una herramienta de vista previa de edición de código, similar a codepen .

Ejemplo en línea: https://wanglin2.github.io/code-run-online/.

Artículos relacionados

Use Skypack para importar módulos ES directamente en su navegador

Cree rápidamente una herramienta de vista previa de edición en línea de código

¿Cómo analizar manualmente el archivo único y verlo previamente?

Enseñe paso a paso para implementar el tema VScode en el editor de Monaco

característica

• Admite múltiples idiomas de preprocesamiento

• Admite el cambio aleatorio de diseños múltiples

• Admite agregar recursos adicionales css y js

• Plantillas comunes múltiples incorporadas

• Apoya la exportación de zip

• Formateo del código de soporte

• Una consola hermosa y poderosa

• Admite archivos vue únicos (2.x, 3.x)

• Admite la portada directa de temas VSCode , y tiene una gran cantidad de temas de alta calidad

• Soporte incorporado Para guardar a GitHub Gist [API GIST], es muy fácil modificarlo para guardarlo en su propio sistema de almacenamiento.

• Soporte incorporado para guardar cambios en la URL sin GitHub GIST, para que pueda compartir fácilmente la URL con otros para verlo.

• Soporte incorporado para generar imágenes de código tan hermosas y hermosas como carbono

• Un impkg incorporado e importmap para admitir el uso de la sintaxis del módulo ES en el navegador

• Admite el modo de incrustación, que es conveniente para su uso en los sitios web de documentos, facilitando los ejemplos de documentos

Construcción local

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

cd code-run

npm i

npm run serve

Embalar

Modificar la ruta base de la aplicación

Primero confirme la ruta base aplicada después del embalaje. La ruta base predeterminada del proyecto es /code-run/ . Si desea cambiarlo, puede modificarlo de la siguiente manera:

1. Modifique el campo publicPath en el archivo vue.config.js .

2. Modifique el campo base del archivo src/config/index.js .

Modificar el modo de enrutamiento

El modo de enrutamiento predeterminado es hash模式. Si necesita usar el modo history , modifique el campo routerMode del archivo src/config/index.js .

Además, si hay rutas de nivel múltiple en el modo Historial, los siguientes archivos pueden modificarse:

1. Modifique la ruta de los recursos js relacionados prettier en el archivo /public/index.html ;

Comando de embalaje

npm run build

Proyecto de tecnología principal

Andamio: Vue CLI

Marco: Vue 3.X Family Bucket, utilizando组合式API a través de script setup

Biblioteca UI: element-plus

Editor de código: Monaco Editor

Captura de pantalla de interfaz

Sobre el uso de ESM

Actualmente, ESM es compatible con JavaScript , TypeScript , CoffeeScript , Vue3 , Vue2 y otros modos. Por defecto, si importa módulos directamente de la siguiente manera:

 import moment from 'moment'

Finalmente se convertirá en:

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

Es decir, UNPKG, pero algunos módulos unpkg no pueden obtener la versión ESM , o la versión obtenida directamente no es lo que esperamos. Por ejemplo, al importar vue , lo que necesitamos es https://unpkg.com/[email protected]/dist/vue.esm-browser.js , pero https://unpkg.com/vue?module devuelve por defecto https://unpkg.com/[email protected]/dist/vue.runtime.esm-bundler.js?module . Esta versión no puede ejecutarse en el navegador, por lo que puede agregar manualmente ImportMap para establecer la fuente del módulo de importación.

Nuevos tutoriales sobre el tema

Este tutorial está dirigido al tema de migración VSCode .

1. Determine el tema que desea agregar, primero instale y cambie al tema en el VSCode local, luego presione F1 o Command/Control + Shift + P o haga clic con el botón derecho Command Palette/命令面板, luego busque y haga clic en Developer:Generate Color Theme From Current Setting/开发人员:使用当前设置生成颜色主题json los VSCode y luego el proyecto /scripts/vscodeThemes/ .

2. Luego ejecute el comando npm run convertTheme en la línea de comando, y el tema convertido se emitirá al directorio del proyecto /public/themes . A continuación, ejecute el comando npm run createThemeList para generar la configuración del tema. A continuación, puede设置->主题设置里看到所有主题，并可以切换使用.

Introducción al comando relacionado

• npm run buildConsole : el archivo /public/console/index.js del proyecto compilado es la sintaxis ES5 y la salida para compile.js en el mismo directorio. El archivo se cargará en iframe de la vista previa de la página. No modifique el archivo compile.js directamente.

• npm run buildMonacoWorker : empaqueta el archivo worker del editor Monaco Editor Editor. Si la versión del editor Monaco Editor usó cambios, debe reempaquetarse.

• npm run convertTheme : Convierte el archivo del tema VSCode en el archivo del tema Monaco Editor .

• npm run createThemeList : genera automáticamente archivos de configuración basados en la lista de archivos del tema.

• npm run buildVueSFCCompiler : paquete @vue/compiler-sfc archivo para Vue3 .

Guía de actualización del compilador

Debido a que este proyecto es un proyecto de front-end puro, es necesario compilar en línea al usar idiomas de preprocesamiento o idiomas extendidos como less , sass , typescript , etc. Este trabajo es procesado por compiladores en cada idioma. Puede encontrar estos compiladores en /public/parses/ . Con el tiempo, definitivamente se retrasarán detrás de sus nuevas versiones, por lo que debe actualizarlas regularmente. Obtener su versión del navegador no es fácil, por lo que compartiré algo de mi única experiencia contigo aquí.

• less

Primero npm i less , y luego encuentre less/dist/ en node_modules . Los dos archivos en este directorio están en formato umd y se pueden usar directamente.

• sass

sass está utilizando este proyecto Sass.js, pero este proyecto no se ha actualizado durante tres años.

• babel

babel proporciona una versión del navegador. Para más detalles, consulte el documento oficial @Babel/Standalone.

• typescript

typescript directamente npm i typescript , y luego encuentre el archivo node_modules/typescript/lib/typescript.js , que también admite el uso directo en el navegador.

• coffeescript

coffeescript también es directamente npm i coffeescript , y luego encuentre node_modules/coffeescript/coffeescript-browser-compiler-legacy/coffeescript.js , que admite el uso directo en el navegador.

• livescript

La versión del navegador de livescript se puede descargar directamente de su repositorio oficial, pero no se ha actualizado durante dos años.

• postcss

Puede usar Browserify o webpack para empaquetarlo en un archivo.

• otro

stylus no ha encontrado que la versión del navegador o la compilación todavía haya tenido éxito. Los amigos que lo saben son bienvenidos para mencionar un issue .

Plantilla de código agregada

El proyecto tiene varias plantillas de código de uso común integrado, que se pueden agregar o disminuir según sea necesario. El archivo de configuración de la plantilla está en src/config/templates.js .

Se agregó una nueva plantilla de diseño de página

Tutorial

El proyecto tiene varias plantillas de diseño de página comúnmente utilizadas integradas. Si no satisface sus necesidades, puede agregar nuevos diseños. Un diseño es un vue单文件. Puede encontrar todos los diseños en src/pages/edit/layouts/ . Cada diseño es para determinar cómo mostrar las tres partes编辑器,控制台y预览.编辑器incluye cuatro editores: js , css , html y vue Puede configurar cuáles mostrar, el orden, si está permitido, etc. Los diseños recién agregados también deben colocarse en este directorio.

A continuación, tome vue单文件的布局como un ejemplo. Primero, determine los detalles del diseño. Queremos mostrar un editor vue a la izquierda y mostrar预览y控制台a la derecha.预览se amplía de forma predeterminada y控制台se minimiza de forma predeterminada:

1. Primero creamos un VueSFC.vue en layouts .

2. Modifique el archivo src/config/constants.js , introduzca el componente y agregue el diseño a layoutList y las configuraciones de layoutMap :

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

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

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

Puede agregar una imagen de vista previa del diseño, colocarla en el directorio src/assets/layoutImgs/ luego importarla en el archivo constants.js y finalmente agregarlo en la configuración previewImgMap .

Después de modificar de esta manera, puede ver la opción Vue单文件recientemente agregado en la lista desplegable de布局设置en设置de la página. A continuación, mejore el contenido de VueSFC.vue .

3. Puede consultar el contenido de otras estructuras de diseño y copiarlas para modificarlas. El contenido final debe ser el siguiente:

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

Los comentarios se han explicado en detalle, consulte la siguiente documentación del componente para obtener más detalles.

Documentos de componentes relacionados con el diseño

Componente de arrastre

Este componente es equivalente a un contenedor. Cada contenedor instanciará una clase de arrastre y cambio de tamaño de Resize de tamaño de tamaño, y el componente DragItem debe colocarse dentro.

props de componentes:

nombre	introducir	tipo	valor predeterminado
prostituta	DragItem dentro del contenedor, con opciones: H (disposición horizontal), V (disposición vertical)	Cadena	H
número	Número de componentes DragItem internos	Número	0
configuración	La información del componente DragItem interno, el tipo de matriz y cada elemento es un objeto. Para propiedades específicas, consulte la Tabla 1.	Formación	[]

Tabla 1

Propiedades del objeto de cada elemento en config :

nombre	introducir	tipo	valor predeterminado
por defecto	El tamaño que muestra el componente DragItem del índice correspondiente es el valor predeterminado. Cuando dir es h , se refiere al ancho y cuando v se refiere a la altura.	Número	Todos los componentes DragItem en el espacio dividido de contenedor predeterminado
mínimo	El tamaño mínimo se deja mostrar mediante el componente DragItem del índice correspondiente. Cuando se produce el arrastre, si el espacio del componente se exprime, se permite comprimirse a 0 por defecto, es decir, no se mostrará en absoluto. Si esta propiedad está configurada, no cambiará después de reducirse al tamaño configurado.	Número	0
máximo	El tamaño máximo se deja mostrar mediante el componente DragItem del índice correspondiente. Cuando se produce el arrastre, si se incrementa el espacio del componente, el valor predeterminado se incrementará al tamaño máximo permitido. Si esta propiedad está configurada, no cambiará después de aumentar al tamaño configurado.	Número	0

Componente de dragitem

Este componente representa un bloque de arrastre que debe colocarse debajo del componente Drag para pasar el contenido que debe mostrarse realmente a través de slot . Los contenedores Drag se pueden anidar en el componente DragItem .

props de componentes:

nombre	introducir	tipo	valor predeterminado
desactivado	Está arrastrando prohibido	Booleano	FALSO
TouchBarsize	El tamaño de la barra de arrastre, cuando dir es h , se refiere al ancho, y cuando V es v , se refiere a la altura	Número	20
índice	El índice de este componente en la lista de componentes DragItem en el contenedor, comenzando desde 0	Número	0
showTouchbar	Si mostrar la barra de arrastre	Booleano	verdadero
título	título	Cadena
Esconder	Si ocultar el componente	Booleano	FALSO

Componentes del editor

Este componente actualmente contiene cuatro editores: js , css , html y vue , que pueden controlar cuáles se muestran y cómo están dispuestos.

props de componentes:

nombre	introducir	tipo	valor predeterminado
Esconder	Si ocultar el editor	Booleano	FALSO
prostituta	Dirección de disposición, V (vertical), H (horizontal)	Cadena	H
lista de exhibición	Lista de editores que se mostrarán, Tipo de matriz, cada elemento puede ser un número o un objeto, consulte la Tabla 2	Formación	['Html', 'css', 'js']

Tabla 2

Cada elemento en showList puede ser una cadena, con valores opcionales: HTML , CSS , JS , VUE , que representan cuatro editores y muestran cuáles están configurados.

Si necesita configurar algunas propiedades, como si permitir que el editor arrastre, etc., las propiedades configurables son las siguientes:

nombre	introducir	tipo	valor predeterminado
título	Nombre del editor, opcional: HTML , CSS , JS , VUE	Cadena
discapacitado	¿Está prohibido arrastrar y acercar el editor?	Booleano
showTouchbar	Si mostrar la barra de empuje para este editor	Booleano

Problemas no resueltos

1. Generar la función de imagen del código La altura de la imagen generada ocasionalmente excede la altura real del código, y todavía no se ha encontrado ninguna razón o solución fundamental. Uno de los métodos opcionales proporciona la función de recortar la imagen después de generar la imagen.

2. En casos raros, se producirá efecto el problema del tema que no entra en vigencia.

Expresiones de gratitud

La parte de compilación del lenguaje de preprocesamiento/extendido en este proyecto y algunos otros detalles se refieren a la implementación del proyecto CodePan.

Licencia

MIT