code run
1.0.0
Инструмент предварительного просмотра кода, аналогичный 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 GIST, чтобы вы могли легко поделиться URL с другими, чтобы просмотреть его.
Встроенная поддержка, чтобы генерировать как красивые и красивые кодовые картинки, как углерод
Встроенный UNCKG и 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. Измените путь к prettier ресурсам js в файле /public/index.html ;
npm run build Строительные леса: Vue CLI
Структура: Vue 3.X Семейное ведро, используя组合式API через script setup
Библиотека пользовательского интерфейса: element-plus
Редактор кода: Monaco Editor
В настоящее время 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 Migration.
1. Определите тему, которую вы хотите добавить, сначала установите и переключитесь на тему на локальном VSCode , затем нажмите F1 или Command/Control + Shift + P или щелкните правой кнопкой мыши Command Palette/命令面板, затем нажмите и нажмите Developer:Generate Color Theme From Current Setting/开发人员:使用当前设置生成颜色主题, а затем VSCode будет генерировать копии данных json и сохранения его /scripts/vscodeThemes/ VSCODE.
2. Затем выполните команду npm run convertTheme в командной строке, и преобразованная тема будет выведена в каталог проекта /public/themes . Затем выполните команду npm run createThemeList чтобы сгенерировать конфигурацию темы. Далее вы можете设置->主题设置里看到所有主题，并可以切换使用.
npm run buildConsole : файл /public/console/index.js скомпилированного проекта является синтаксисом ES5 и выводом для compile.js в том же каталоге. Файл будет загружен в iframe просмотре страницы. Пожалуйста, не изменяйте файл 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 .
Поскольку этот проект является чистым фронтальным проектом, необходимо собирать онлайн при использовании языков предварительной обработки или расширенных языков, таких как less , sass , typescript и т. Д. Эта работа обрабатывается компиляторами на каждом языке. Вы можете найти эти компиляторы в /public/parses/ каталог. Со временем они определенно будут отставать от своих новых версий, поэтому вам нужно регулярно обновлять их. Получить версию их браузера нелегко, поэтому я поделюсь с вами своим единственным опытом здесь.
less Сначала npm i less , а затем найдите каталог less/dist/ node_modules . Два файла в этом каталоге находятся в формате umd и могут использоваться напрямую.
sass В настоящее время sass использует этот проект Sass.js, но этот проект не был обновлен в течение трех лет.
babel babel обеспечивает версию браузера. Для получения подробной информации, пожалуйста, обратитесь к официальному документу @babel/stantalone.
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/ , а затем импортируйте его в файл 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 :
| имя | представлять | тип | значение по умолчанию |
|---|---|---|---|
| режиссер | Метод расположения компонентов DragItem внутри контейнера, с параметрами: H (горизонтальное расположение), V (вертикальное расположение) | Нить | час |
| число | Количество внутренних компонентов DragItem | Число | 0 |
| конфигурация | Информация внутреннего компонента DragItem , типа массива и каждого элемента является объектом. Для конкретных свойств, пожалуйста, обратитесь к таблице 1. | Множество | [] |
Свойства объекта каждого элемента в config массиве:
| имя | представлять | тип | значение по умолчанию |
|---|---|---|---|
| по умолчанию | Размер, отображаемый компонентом DragItem соответствующего индекса, является по умолчанию. Когда dir h h , он относится к ширине и когда v относится к высоте. | Число | Все компоненты DragItem в разделении контейнера по умолчанию |
| мин | Минимальный размер, разрешенный для отображения компонентом DragItem соответствующего индекса. Когда происходит перетаскивание, если компонентное пространство сжимается, по умолчанию оно разрешено сжимать до 0, то есть оно вообще не будет отображаться. Если это свойство настроено, оно не будет изменяться после сокращения до настроенного размера. | Число | 0 |
| максимум | Максимальный размер, который должен отображаться компонентом DragItem соответствующего индекса. Когда происходит перетаскивание, если компонентное пространство увеличивается, по умолчанию будет увеличено до максимального размера. Если это свойство настроено, оно не будет изменяться после увеличения до настроенного размера. | Число | 0 |
Этот компонент представляет собой перетаскиваемый блок, который необходимо размещать под компонентом Drag , чтобы пройти в контент, который необходимо отображать через slot . Контейнеры Drag могут быть вложены в компонент DragItem .
Компонентный props :
| имя | представлять | тип | значение по умолчанию |
|---|---|---|---|
| неполноценный | Запрещается | Логический | ЛОЖЬ |
| Touchbarsize | Размер перетаскивания, когда dir h , относится к ширине, а когда V v , относится к высоте | Число | 20 |
| индекс | Индекс этого компонента в списке компонентов DragItem в контейнере, начиная с 0 | Число | 0 |
| Showtouchbar | Отображать ли плату за перетаскивание | Логический | истинный |
| заголовок | заголовок | Нить | |
| Скрывать | Скрыть ли компонент | Логический | ЛОЖЬ |
Этот компонент в настоящее время содержит четыре редактора: js , css , html и vue , которые могут контролировать, какие из них отображаются и как они расположены.
Компонентный props :
| имя | представлять | тип | значение по умолчанию |
|---|---|---|---|
| Скрывать | Скрыть ли редактор | Логический | ЛОЖЬ |
| режиссер | Направление расположения, v (вертикальная), ч (горизонтальный) | Нить | час |
| Showlist | Список редакторов, которые будут отображаться, тип массива, каждый элемент может быть номером или объектом, см. Таблицу 2 | Множество | ['Html', 'css', 'Js'] |
Каждый элемент в массиве showList может быть строкой, с необязательными значениями: HTML , CSS , JS , VUE , представляющие четыре редактора и отображение, какие из них настроены.
Если вам нужно настроить некоторые свойства, например, разрешить ли редактор перетаскивать и т. Д., Настраиваемые свойства следующие:
| имя | представлять | тип | значение по умолчанию |
|---|---|---|---|
| заголовок | Имя редактора, необязательное: HTML , CSS , JS , VUE | Нить | |
| инвалид | Запрещено перетаскивать и увеличивать редактор | Логический | |
| Showtouchbar | Чтобы отобразить нажавную панель для этого редактора | Логический |
1. Сгенерируйте функцию кода изображения. Высота изображения, сгенерированная, иногда превышает фактическую высоту кода, и еще не было обнаружено никаких причин или фундаментального решения. Один из дополнительных методов обеспечивает функцию обрезки изображения после генерации изображения.
2. В редких случаях проблема не вступает в силу темы.
Компиляция часть препроцессы/расширенного языка в этом проекте и некоторые другие детали относятся к реализации кода проекта.
Грань
