الصفحة الرئيسية>موارد بناء الموقع>موارد أخرى
تنزيل

يدير الكود

أداة معاينة تحرير التعليمات البرمجية ، على غرار codepen .

مثال عبر الإنترنت: https://wanglin2.github.io/code-run-online/.

المقالات ذات الصلة

استخدم Skypack لاستيراد وحدات ES مباشرة على متصفحك

قم بإنشاء أداة معاينة تحرير الرمز عبر الإنترنت بسرعة

كيفية تحليل ملف واحد يدويًا ومعاينةه؟

يعلمك خطوة بخطوة لتنفيذ موضوع VSCODE في محرر موناكو

خاصية

  • يدعم لغات المعالجة المسبقة المتعددة

  • يدعم التبديل العشوائي للتخطيطات المتعددة

  • يدعم إضافة موارد css و js إضافية

  • قوالب مشتركة متعددة مدمجة

  • دعم تصدير zip

  • تنسيق رمز الدعم

  • وحدة تحكم جميلة وقوية

  • يدعم ملفات vue الفردية (2.x ، 3.x)

  • يدعم النقل المباشر لموضوعات VSCode ، ولديه عدد كبير من الموضوعات عالية الجودة

  • الدعم المدمج للحفظ إلى github gist [GIST API] ، من السهل جدًا تعديله لحفظه على نظام التخزين الخاص بك.

  • دعم مدمج لحفظ التغييرات على عنوان URL بدون Github Gist ، بحيث يمكنك بسهولة مشاركة عنوان 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

الإطار: دلو عائلة Vue 3.X ، باستخدام组合式API من خلال script setup

مكتبة واجهة المستخدم: element-plus

محرر الرمز: 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/命令面板، ثم ابحث عن Developer:Generate Color Theme From Current Setting/开发人员:使用当前设置生成颜色主题، ثم يتم إنشاء نسخة json VSCode على /scripts/vscodeThemes/

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/ directory. بمرور الوقت ، سوف يتخلفون بالتأكيد عن إصداراتهم الجديدة ، لذلك تحتاج إلى تحديثها بانتظام. ليس من السهل الحصول على إصدار المتصفح الخاص بهم ، لذلك سأشارك بعض تجربتي الوحيدة معك هنا.

  • less

أول npm i less ، ثم ابحث less/dist/ الدليل في 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 المكونة:

اسم يقدم يكتب القيمة الافتراضية
دير طريقة ترتيب مكون 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 المكونة:

اسم يقدم يكتب القيمة الافتراضية
يخفي سواء لإخفاء المحرر منطقية خطأ شنيع
دير اتجاه الترتيب ، الخامس (عمودي) ، ح (أفقي) خيط ح
قائمة العرض قائمة المحررين الذين سيتم عرضهم ، نوع الصفيف ، يمكن أن يكون كل عنصر رقمًا أو كائنًا ، انظر الجدول 2 صفيف ['html' ، 'css' ، 'js']

الجدول 2

يمكن أن يكون كل عنصر في صفيف showList سلسلة ، مع قيم اختيارية: HTML ، CSS ، JS ، VUE ، يمثل أربعة محررين ، وعرض أي منها تم تكوينه.

إذا كنت بحاجة إلى تكوين بعض الخصائص ، مثل السماح للمحرر بالسحب ، وما إلى ذلك ، فإن الخصائص القابلة للتكوين هي كما يلي:

اسم يقدم يكتب القيمة الافتراضية
عنوان اسم المحرر ، اختياري: HTML ، CSS ، JS ، VUE خيط
تعطيل هل يحظر سحب المحرر وتكبيره منطقية
Showtouchbar ما إذا كنت تريد عرض شريط الدفع لهذا المحرر منطقية

القضايا التي لم تحل

1. إنشاء وظيفة صورة الكود يتجاوز ارتفاع الصورة الذي يتم إنشاؤه من حين لآخر الارتفاع الفعلي للرمز ، ولم يتم العثور على أي سبب أو حل أساسي بعد. توفر إحدى الطرق الاختيارية وظيفة اقتصاص الصورة بعد إنشاء الصورة.

2. في حالات نادرة ، ستحدث مشكلة عدم ساري المفعول.

شكر وتقدير

يشير جزء التجميع من اللغة المسبقة/الممتدة في هذا المشروع وبعض التفاصيل الأخرى إلى تنفيذ Codepan للمشروع.

رخصة

معهد ماساتشوستس للتكنولوجيا

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل