code run

de code

Un outil d'aperçu de modification de code, similaire à codepen .

Exemple en ligne: https://wanglin2.github.io/code-run-online/.

Articles connexes

Utilisez Skypack pour importer directement des modules ES sur votre navigateur

Créez rapidement un code d'aperçu du code en ligne

Comment analyser manuellement le fichier unique Vue et le prévisualiser?

Vous apprendre étape par étape pour implémenter le thème VScode dans l'éditeur de Monaco

caractéristiques

• Prend en charge plusieurs langues de prétraitement

• Prend en charge la commutation aléatoire de plusieurs dispositions

• Prend en charge l'ajout de ressources css et js supplémentaires

• Plusieurs modèles communs communs

• Soutenir l'exportation de zip

• Formatage du code de support

• Une console belle et puissante

• Prend en charge les fichiers vue Single (2.x, 3.x)

• Prend en charge le portage direct des thèmes VSCode et possède un grand nombre de thèmes de haute qualité

• Prise en charge intégrée pour enregistrer sur GitHub Gist [GIST API], il est très facile de le modifier pour enregistrer sur votre propre système de stockage.

• Prise en charge intégrée pour enregistrer les modifications de l'URL sans Github Gist, afin que vous puissiez facilement partager l'URL avec d'autres pour le visualiser.

• Support intégré pour générer des photos de code aussi belles et belles que le carbone

• UNPKG intégré et importmap pour prendre en charge l'utilisation de la syntaxe du module ES sur le navigateur

• Prend en charge le mode intégration, ce qui est pratique pour une utilisation dans les sites Web de documents, facilitant les exemples de documents

Construction locale

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

cd code-run

npm i

npm run serve

Paquet

Modifier le chemin de base d'application

Veuillez d'abord confirmer le chemin de base appliqué après l'emballage. Le chemin de base par défaut du projet est /code-run/ . Si vous souhaitez le changer, vous pouvez le modifier comme suit:

1. Modifiez le champ publicPath dans le fichier vue.config.js .

2. Modifiez le champ base du fichier src/config/index.js .

Modifier le mode de routage

Le mode de routage par défaut est hash模式. Si vous avez besoin d'utiliser le mode history , veuillez modifier le champ routerMode du fichier src/config/index.js .

De plus, s'il existe des chemins à plusieurs niveaux en mode historique, les fichiers suivants peuvent être modifiés:

1. Modifiez le chemin d'accès des ressources js liées prettier dans le fichier /public/index.html ;

Commande d'emballage

npm run build

Projet Technologie principale

Échafaudage: Vue CLI

Framework: Bodet de famille Vue 3.X , en utilisant组合式API via script setup

Bibliothèque d'interface utilisateur: element-plus

Éditeur de code: Monaco Editor

Capture d'écran d'interface

À propos de l'utilisation d'ESM

Actuellement, ESM est pris en charge dans JavaScript , TypeScript , CoffeeScript , Vue3 , Vue2 et d'autres modes. Par défaut, si vous importez directement des modules de la manière suivante:

 import moment from 'moment'

Enfin, il sera converti en:

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

C'est-à-dire l'utilisation d'UNPKG, mais certains modules unpkg ne peuvent pas obtenir la version ESM , ou la version obtenue directement n'est pas ce que nous attendons. Par exemple, lors de l'importation vue , ce dont nous avons besoin, c'est de https://unpkg.com/[email protected]/dist/vue.esm-browser.js , mais https://unpkg.com/vue?module revient par défaut https://unpkg.com/[email protected]/dist/vue.runtime.esm-bundler.js?module . Cette version ne peut pas fonctionner sur le navigateur, vous pouvez donc ajouter manuellement ImportMap pour définir la source du module d'importation.

Nouveaux tutoriels sur le sujet

Ce tutoriel vise le sujet de la migration VSCode .

1. Déterminez le thème que vous souhaitez ajouter, installez d'abord et passez au thème sur le VSCode local, puis appuyez sur F1 ou Command/Control + Shift + P ou cliquez avec le bouton droit sur Command Palette/命令面板, puis Recherchez et cliquez sur Developer:Generate Color Theme From Current Setting/开发人员:使用当前设置生成颜色主题, puis VSCode générera une copie de json et de la sauvegarde sur le /scripts/vscodeThemes/ de la référence.

2. Ensuite, exécutez ensuite la commande npm run convertTheme sur la ligne de commande, et le thème converti sera sorti en répertoire du projet /public/themes . Ensuite, exécutez la commande npm run createThemeList pour générer la configuration du thème. Ensuite, vous pouvez设置->主题设置里看到所有主题，并可以切换使用.

Introduction de la commande connexe

• npm run buildConsole : Le fichier /public/console/index.js du projet compilé est la syntaxe ES5 et la sortie à compile.js dans le même répertoire. Le fichier sera chargé dans iframe de l'aperçu de la page. Veuillez ne pas modifier directement le fichier compile.js .

• npm run buildMonacoWorker : Emballe le fichier worker de l'éditeur Monaco Editor éditeur. Si la version de l'éditeur Monaco Editor a utilisé les changements, elle doit être reconditionnée.

• npm run convertTheme : convertit le fichier de thème VSCode en fichier de thème Monaco Editor .

• npm run createThemeList : génère automatiquement des fichiers de configuration en fonction de la liste des fichiers de thème.

• npm run buildVueSFCCompiler : package @vue/compiler-sfc Fichier pour Vue3 .

Guide de mise à jour du compilateur

Étant donné que ce projet est un projet frontal pur, il est nécessaire de compiler en ligne lors de l'utilisation de langages de prétraitement ou de langages étendus tels que less , sass , typescript , etc. Ce travail est traité par des compilateurs dans chaque langue. Vous pouvez trouver ces compilateurs dans /public/parses/ répertoire. Au fil du temps, ils seront certainement à la traîne de leurs nouvelles versions, vous devez donc les mettre à jour régulièrement. Obtenir leur version de navigateur n'est pas facile, donc je partagerai une partie de ma seule expérience avec vous ici.

• less

D'abord npm i less , puis trouvez less/dist/ dans node_modules . Les deux fichiers de ce répertoire sont au format umd et peuvent être utilisés directement.

• sass

sass utilise actuellement ce projet Sass.js, mais ce projet n'a pas été mis à jour depuis trois ans.

• babel

babel fournit une version du navigateur. Pour plus de détails, veuillez consulter le document officiel @ babel / autonome.

• typescript

typescript directement npm i typescript , puis trouvez le fichier node_modules/typescript/lib/typescript.js , qui prend également en charge l'utilisation directe sur le navigateur.

• coffeescript

coffeescript est également directement npm i coffeescript , puis trouve node_modules/coffeescript/coffeescript-browser-compiler-legacy/coffeescript.js , qui prend en charge l'utilisation directe sur le navigateur.

• livescript

La version du navigateur de livescript peut être téléchargée directement à partir de son référentiel officiel, mais il n'a pas été mis à jour depuis deux ans.

• postcss

Vous pouvez utiliser Browserify ou webpack pour le emballer dans un fichier.

• autre

stylus n'a pas trouvé la version du navigateur ou la compilation a encore réussi. Les amis qui le savent sont invités à mentionner un issue .

Modèle de code ajouté

Le projet a plusieurs modèles de code couramment utilisés intégrés, qui peuvent être ajoutés ou diminués au besoin. Le fichier de configuration du modèle est dans src/config/templates.js .

Ajout d'un nouveau modèle de mise en page de page

Tutoriel

Le projet propose plusieurs modèles de mise en page couramment utilisés intégrés. S'il ne répond pas à vos besoins, vous pouvez ajouter de nouvelles dispositions. Une mise en page est un vue单文件. Vous pouvez trouver toutes les mises en page dans src/pages/edit/layouts/ . Chaque mise en page doit en fait déterminer comment afficher les trois parties编辑器,控制台et预览.编辑器comprend quatre éditeurs: js , css , html et vue Vous pouvez configurer lesquels afficher, l'ordre, que ce soit autorisé, etc. Les dispositions nouvellement ajoutées doivent également être placées dans ce répertoire.

Ensuite, prenez vue单文件的布局comme exemple. Tout d'abord, déterminez les détails de mise en page. Nous voulons afficher un éditeur vue à gauche et afficher预览et控制台à droite.预览est élargi par défaut et控制台est minimisée par défaut:

1. Nous créons d'abord un VueSFC.vue dans layouts .

2. Modifiez le fichier src/config/constants.js , introduisez le composant et ajoutez la mise en page aux configurations layoutList et layoutMap :

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

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

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

Vous pouvez ajouter une image d'aperçu de la mise en page, la placer dans le répertoire src/assets/layoutImgs/ , puis l'importer dans le fichier constants.js et enfin l'ajouter dans la configuration previewImgMap .

Après avoir modifié de cette façon, vous pouvez voir l'option Vue单文件nouvellement ajouté dans la liste déroulante des布局设置dans设置de la page. Ensuite, améliorez le contenu de VueSFC.vue .

3. Vous pouvez vous référer au contenu d'autres structures de mise en page et les copier pour les modifier. Le contenu final doit être le suivant:

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

Les commentaires ont été expliqués en détail, veuillez vous référer à la documentation du composant suivant pour plus de détails.

Documents de composants liés à la disposition

Composant de traînée

Ce composant équivaut à un conteneur. Chaque conteneur instanciera une classe de glisser- Resize et de redimensionnement de la taille de redimensionnement, et le composant DragItem doit être placé à l'intérieur.

props de composant:

nom	introduire	taper	valeur par défaut
diron	DragItem à l'intérieur du conteneur, avec des options: H (arrangement horizontal), V (arrangement vertical)	Chaîne	H
nombre	Nombre de composants DragItem internes	Nombre	0
configurer	Les informations du composant DragItem interne, du type de tableau et de chaque élément sont un objet. Pour des propriétés spécifiques, veuillez vous référer au tableau 1.	Tableau	[]

Tableau 1

Propriétés de l'objet de chaque élément dans config :

nom	introduire	taper	valeur par défaut
défaut	La taille affichée par le composant DragItem de l'index correspondant est la valeur par défaut. Lorsque dir est h , il fait référence à la largeur et lorsque v fait référence à la hauteur.	Nombre	Tous les composants DragItem dans l'espace divisé en conteneur par défaut
min	La taille minimale autorisée à afficher par le composant DragItem de l'index correspondant. Lorsque la traînée se produit, si l'espace des composants est pressé, il est autorisé à être comprimé à 0 par défaut, c'est-à-dire qu'il ne sera pas du tout affiché. Si cette propriété est configurée, elle ne changera pas après avoir rétréci la taille configurée.	Nombre	0
max	La taille maximale autorisée à afficher par le composant DragItem de l'index correspondant. Lorsque la traînée se produit, si l'espace des composants augmente, la valeur par défaut sera augmentée à la taille maximale autorisée. Si cette propriété est configurée, elle ne changera pas après avoir augmenté à la taille configurée.	Nombre	0

Composant dragitem

Ce composant représente un bloc Draggable qui doit être placé sous le composant Drag pour transmettre le contenu qui doit être réellement affiché via slot . Les conteneurs Drag peuvent être imbriqués dans le composant DragItem .

props de composant:

nom	introduire	taper	valeur par défaut
désactivé	Traîner l'interdiction	Booléen	FAUX
tactile	La taille de la barre de traînée, lorsque dir est h , fait référence à la largeur et lorsque V est v , se réfère à la hauteur	Nombre	20
indice	L'indice de ce composant dans la liste des composants DragItem dans le conteneur, à partir de 0	Nombre	0
showtouchbar	S'il faut afficher la barre de traînée	Booléen	vrai
titre	titre	Chaîne
Cacher	Si vous devez masquer le composant	Booléen	FAUX

Composants de l'éditeur

Ce composant contient actuellement quatre éditeurs: js , css , html et vue , qui peuvent contrôler lesquels sont affichés et comment ils sont disposés.

props de composant:

nom	introduire	taper	valeur par défaut
Cacher	Si vous devez cacher l'éditeur	Booléen	FAUX
diron	Direction de la disposition, V (vertical), h (horizontal)	Chaîne	H
liste de spectacles	Liste des éditeurs à afficher, type de tableau, chaque élément peut être un nombre ou un objet, voir le tableau 2	Tableau	['Html', 'css', 'js']

Tableau 2

Chaque élément du tableau showList peut être une chaîne, avec des valeurs facultatives: HTML , CSS , JS , VUE , représentant quatre éditeurs et affichant lesquels sont configurés.

Si vous devez configurer certaines propriétés, telles que l'opportunité de permettre à l'éditeur de glisser, etc., les propriétés configurables sont les suivantes:

nom	introduire	taper	valeur par défaut
titre	Nom de l'éditeur, facultatif: HTML , CSS , JS , VUE	Chaîne
désactivé	Est-il interdit de glisser et de zoomer l'éditeur	Booléen
showtouchbar	S'il faut afficher la barre de poussée de cet éditeur	Booléen

Problèmes non résolus

1. Générer la fonction d'image du code La hauteur d'image générée dépasse occasionnellement la hauteur réelle du code, et aucune raison ou solution fondamentale n'a encore été trouvée. L'une des méthodes facultatives offre la fonction de recadrage de l'image après avoir généré l'image.

2. Dans de rares cas, le problème du sujet qui ne prendra pas effet se produira.

Remerciements

La partie de compilation de la langue de prétraitement / étendue de ce projet et de certains autres détails se réfèrent à la mise en œuvre du Codepan du projet.

Licence

Mit