code run

Código de código

Uma ferramenta de visualização de edição de código, semelhante ao codepen .

Exemplo online: https://wanglin2.github.io/code-run-online/.

Artigos relacionados

Use Skypack para importar módulos ES diretamente no seu navegador

Crie rapidamente uma ferramenta de visualização de edição online de código

Como analisar manualmente o arquivo único e visualizá -lo?

Ensine o passo a passo para implementar o tema do VSCode no editor de Mônaco

característica

• Suporta vários idiomas de pré -processamento

• Suporta comutação aleatória de vários layouts

• Suporta a adição de recursos adicionais de css e js

• Modelos comuns embutidos

• Apoie a exportação de zip

• Formatação de código de suporte

• Um console lindo e poderoso

• Suporta arquivos vue única (2.x, 3.x)

• Suporta a porção direta dos temas VSCode e possui um grande número de temas de alta qualidade

• Suporte interno para salvar no Github GIST [API GIST], é muito fácil modificá-lo para salvar em seu próprio sistema de armazenamento.

• Suporte interno para salvar alterações no URL sem o GitHub GIST, para que você possa compartilhar facilmente o URL com outras pessoas para vê-lo.

• Suporte embutido para gerar como belas e bonitas imagens de código como carbono

• UNPKG e ImportMap integrados para apoiar o uso da sintaxe do módulo ES no navegador

• Suporta o modo de incorporação, que é conveniente para uso em sites de documentos, facilitando os exemplos de documentos

Construção local

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

cd code-run

npm i

npm run serve

Pacote

Modifique o caminho da base do aplicativo

Por favor, confirme primeiro o caminho base aplicado após a embalagem. O caminho base padrão do projeto é /code-run/ . Se você quiser alterá -lo, pode modificá -lo da seguinte forma:

1. Modifique o campo publicPath no arquivo vue.config.js .

2. Modifique o campo base do arquivo src/config/index.js .

Modificar o modo de roteamento

O modo de roteamento padrão é hash模式. Se você precisar usar o modo history , modifique o campo routerMode do arquivo src/config/index.js .

Além disso, se houver caminhos de vários níveis no modo de história, os seguintes arquivos poderão ser modificados:

1. Modifique o caminho dos recursos js relacionados prettier no arquivo /public/index.html ;

Comando de embalagem

npm run build

Projeto Tecnologia Principal

Andaimes: Vue CLI

Framework: Vue 3.X Family Bucket, usando组合式API através da script setup

Biblioteca da interface do usuário: element-plus

Editor de código: Monaco Editor

Screenshot de interface

Sobre o uso de ESM

Atualmente, ESM é suportado em JavaScript , TypeScript , CoffeeScript , Vue3 , Vue2 e outros modos. Por padrão, se você importar diretamente os módulos da seguinte maneira:

 import moment from 'moment'

Finalmente será convertido para:

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

Isso é usar unpkg, mas alguns módulos unpkg não podem obter a versão ESM , ou a versão obtida diretamente não é o que esperamos. For example, when importing vue , what we need is https://unpkg.com/[email protected]/dist/vue.esm-browser.js , but https://unpkg.com/vue?module returns by default https://unpkg.com/[email protected]/dist/vue.runtime.esm-bundler.js?module . Esta versão não pode ser executada no navegador, para que você possa adicionar manualmente o ImportMap para definir a fonte do módulo de importação.

Novos tutoriais sobre o assunto

Este tutorial é destinado ao tópico de migração VSCode .

1. Determine o tema que você deseja adicionar, primeiro instale e mude para o VSCode local, depois pressione F1 ou Command/Control + Shift + P ou clique com o botão direito do mouse Command Palette/命令面板e, em seguida VSCode encontre e clique em Developer:Generate Color Theme From Current Setting/开发人员:使用当前设置生成颜色主题/scripts/vscodeThemes/ use os dados json para gerar o tema e, em seguida.

2. Em seguida, execute o comando npm run convertTheme na linha de comando e o tema convertido será emitido para o diretório /public/themes do projeto. Em seguida, execute o comando npm run createThemeList para gerar a configuração do tema. Em seguida, você pode设置->主题设置里看到所有主题，并可以切换使用.

Introdução ao comando relacionado

• npm run buildConsole : O arquivo /public/console/index.js do projeto compilado é a sintaxe e a saída ES5 para compile.js no mesmo diretório. O arquivo será carregado no iframe da visualização da página. Por favor, não modifique o arquivo compile.js diretamente.

• npm run buildMonacoWorker : Pacote O arquivo worker do editor Monaco Editor Editor. Se a versão do editor Monaco Editor usou alterações, ela precisará ser reembalada.

• npm run convertTheme : converte o arquivo de tema VSCode no arquivo de tema Monaco Editor .

• npm run createThemeList : gera automaticamente arquivos de configuração com base na lista de arquivos de temas.

• npm run buildVueSFCCompiler : package @vue/compiler-sfc arquivo para Vue3 .

Guia de atualização do compilador

Como este projeto é um projeto de front-end puro, é necessário compilar on-line ao usar idiomas de pré-processamento ou idiomas estendidos, como less , sass , typescript etc. Este trabalho é processado pelos compiladores em cada idioma. Você pode encontrar esses compiladores no /public/parses/ Directory. Com o tempo, eles definitivamente ficarão para trás de suas novas versões, então você precisa atualizá -las regularmente. Obter a versão do navegador deles não é fácil, então compartilharei a minha única experiência com você aqui.

• less

Primeiro npm i less e depois encontre less/dist/ node_modules . Os dois arquivos neste diretório estão no formato umd e podem ser usados diretamente.

• sass

Atualmente, sass está usando este projeto sass.js, mas este projeto não é atualizado há três anos.

• babel

babel fornece uma versão do navegador. Para detalhes, consulte o documento oficial @Babel/Standalone.

• typescript

typescript diretamente npm i typescript e, em seguida, encontre o arquivo node_modules/typescript/lib/typescript.js , que também suporta uso direto no navegador.

• coffeescript

coffeescript também é diretamente npm i coffeescript e, em seguida, encontre node_modules/coffeescript/coffeescript-browser-compiler-legacy/coffeescript.js , que suporta uso direto no navegador.

• livescript

A versão do navegador do livescript pode ser baixada diretamente de seu repositório oficial, mas não é atualizado há dois anos.

• postcss

Você pode usar Browserify ou webpack para empacotá -lo em um arquivo.

• outro

stylus não encontrou a versão do navegador ou a compilação ainda foi bem -sucedida. Amigos que sabem que são bem -vindos mencionar um issue .

Modelo de código adicionado

O projeto possui vários modelos de código comumente usados, que podem ser adicionados ou diminuídos conforme necessário. O arquivo de configuração do modelo está no src/config/templates.js .

Adicionado um novo modelo de layout de página

Tutorial

O projeto possui vários modelos de layout de página comumente usados. Se não atender às suas necessidades, você poderá adicionar novos layouts. Um layout é um vue单文件. Você pode encontrar todos os layouts no diretório src/pages/edit/layouts/ . Cada layout é realmente para determinar como exibir as três partes编辑器,控制台e预览.编辑器inclui quatro editores: js , css , html e vue Você pode configurar quais exibir, a ordem, se o arrasto é permitido etc. Os layouts recém -adicionados também precisam ser colocados neste diretório.

Em seguida, pegue vue单文件的布局como exemplo. Primeiro, determine os detalhes do layout. Queremos exibir um editor vue à esquerda e exibir预览e控制台à direita.预览é expandido por padrão e控制台é minimizado por padrão:

1. Primeiro, criamos um VueSFC.vue no diretório layouts .

2. Modifique o arquivo src/config/constants.js , introduza o componente e adicione o layout à layoutList e as configurações layoutMap :

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

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

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

Você pode adicionar uma imagem de visualização do layout, colocá -la no diretório src/assets/layoutImgs/ , em seguida, importá -lo no arquivo constants.js e, finalmente, adicioná -lo na configuração previewImgMap .

Depois de modificar dessa maneira, você pode ver a opção Vue单文件na lista suspensa das布局设置na função设置da página. Em seguida, melhore o conteúdo de VueSFC.vue .

3. Você pode consultar o conteúdo de outras estruturas de layout e copiá -las para modificá -las. O conteúdo final deve ser o seguinte:

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

Os comentários foram explicados em detalhes, consulte a seguinte documentação do componente para obter detalhes.

Documentos de componentes relacionados ao layout

Componente de arrasto

Este componente é equivalente a um contêiner. Cada contêiner instanciará um arrasto de tamanho de Resize e redimensiona a classe, e o componente DragItem precisa ser colocado dentro.

props de componentes:

nome	introduzir	tipo	valor padrão
dir	DragItem dentro do contêiner, com opções: H (arranjo horizontal), V (arranjo vertical)	Corda	h
número	Número de componentes DragItem internos	Número	0
Config	As informações do componente DragItem interno, tipo de matriz e cada item é um objeto. Para propriedades específicas, consulte a Tabela 1.	Variedade	[]

Tabela 1

Propriedades do objeto de cada item na matriz config :

nome	introduzir	tipo	valor padrão
padrão	O tamanho exibido pelo componente DragItem do índice correspondente é o padrão. Quando dir é h , refere -se à largura e quando v refere -se à altura.	Número	Todos os componentes DragItem no espaço de divisão padrão do contêiner
min	O tamanho mínimo permitido ser exibido pelo componente DragItem do índice correspondente. Quando o arrasto ocorre, se o espaço do componente for espremido, ele poderá ser comprimido para 0 por padrão, ou seja, ele não será exibido. Se esta propriedade estiver configurada, ela não mudará após a redução do tamanho configurado.	Número	0
máx	O tamanho máximo permitido para ser exibido pelo componente DragItem do índice correspondente. Quando o arrasto ocorre, se o espaço do componente for aumentado, o padrão será aumentado para o tamanho máximo permitido. Se esta propriedade estiver configurada, ela não mudará após aumentar para o tamanho configurado.	Número	0

Componente dragitem

Esse componente representa um bloco arrastado que precisa ser colocado sob o componente Drag para passar no conteúdo que precisa ser realmente exibido através slot . Os contêineres Drag podem ser aninhados no componente DragItem .

props de componentes:

nome	introduzir	tipo	valor padrão
desabilitado	Está arrastando proibido	Booleano	falso
touchbarsize	O tamanho da barra de arrasto, quando dir é h , refere -se à largura e quando V é v , refere -se à altura	Número	20
índice	O índice deste componente na lista de componentes DragItem no contêiner, começando de 0	Número	0
ShowTouchbar	Se deve exibir a barra de arrasto	Booleano	verdadeiro
título	título	Corda
Esconder	Se deve ocultar o componente	Booleano	falso

Componentes do editor

Atualmente, esse componente contém quatro editores: js , css , html e vue , que podem controlar quais são exibidos e como estão dispostos.

props de componentes:

nome	introduzir	tipo	valor padrão
Esconder	Se deve ocultar o editor	Booleano	falso
dir	Direção do arranjo, V (vertical), H (horizontal)	Corda	h
Showlist	Lista de editores a serem exibidos, tipo de matriz, cada item pode ser um número ou um objeto, consulte a Tabela 2	Variedade	['Html', 'css', 'js']

Tabela 2

Cada item na matriz showList pode ser uma string, com valores opcionais: HTML , CSS , JS , VUE , representando quatro editores e exibindo quais estão configurados.

Se você precisar configurar algumas propriedades, como permitir que o editor arraste etc., as propriedades configuráveis são as seguintes:

nome	introduzir	tipo	valor padrão
título	Nome do editor, opcional: HTML , CSS , JS , VUE	Corda
DisabledRag	É proibido arrastar e zoom o editor	Booleano
ShowTouchbar	Se deve exibir a barra de push para este editor	Booleano

Questões não resolvidas

1. Gere a função da imagem do código A altura da imagem gerada ocasionalmente excede ocasionalmente a altura real do código, e nenhuma razão ou solução fundamental ainda foi encontrada. Um dos métodos opcionais fornece a função de cortar a imagem após gerar a imagem.

2. Em casos raros, ocorrerá o problema do tópico que não entra em vigor.

Agradecimentos

A parte de compilação do idioma de pré -processamento/estendido neste projeto e alguns outros detalhes se referem à implementação do projeto CodePan.

Licença

Mit