Π― Ρ ΠΎΡΠ΅Π» Π±Ρ Π²ΠΈΠ΄Π΅ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΡΠ°ΠΉΠ»ΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠ·ΡΠΊΠΈ, Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅. ΠΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΎΠ΄Π½ΠΎΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ Vue.js. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°: http://vuejs.org/images/vue-component-with-pre-processors.png. ΠΠ»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ: http://vuejs.org/guide/application.html#Single_File_Components .
ΠΠ»Ρ Sublime Π΄ΠΎΡΡΡΠΏΠ΅Π½ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠΈ ΡΠ°ΠΉΠ»ΠΎΠ² .vue: https://github.com/vuejs/vue-syntax-highlight .
ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎ ΡΡΠΎΠΌΡ ΠΏΠΎΠ²ΠΎΠ΄Ρ?
Π― ΡΠΎΠ³Π»Π°ΡΠ΅Π½. ΠΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ ΡΠ»Π΅Π΄ΠΈΡ Π·Π° ΡΡΠΈΠΌ? ΠΠΎΠΆΠ΅ΠΌ Π»ΠΈ ΠΌΡ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π½Π°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° Π²ΠΎΠ·Π²ΡΡΠ΅Π½Π½ΠΎΠ³ΠΎ/Π°ΡΠΎΠΌΠ°? ΡΡΠΎ Π½Π΅Π΄ΠΎΡΡΠ°ΡΡΠ΅Π΅ Π·Π²Π΅Π½ΠΎ ΠΎΡ ΠΌΠ΅Π½Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΄ΡΠΊΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Ρ ΡΠ°Π±ΠΎΡΠ°Ρ Π² Vue Π²Π΅ΡΡ Π΄Π΅Π½Ρ, ΠΌΠ½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ Π²ΡΡΡΠ½ΡΡΡ, Π±ΡΠ΄Π΅Ρ Π»ΠΈ ΠΎΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ, ΠΈΠ»ΠΈ, Π΅ΡΠ»ΠΈ Π½Π΅Ρ, Π³Π΄Π΅ ΡΡΠΎ-ΡΠΎ, ΡΡΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΡΡΡΠΎΠΈΡΡ Π² Π·Π°Π΄Π½Π΅ΠΉ Π΄Π²Π΅ΡΠΈ?
Π― ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ³Π»Π°ΡΠ΅Π½.
Π― ΡΠΎΠΆΠ΅
:+1:
Ρ ΡΠΎΠΆΠ΅!!!
Π‘ΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΡΠΉ!
ΠΡΠ΄Π΅Ρ ΠΊΡΡΡΠΎ
CodeMirror ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ View @asdred
ΠΡΠ±ΡΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎ ΡΡΠΎΠΌΡ ΠΏΠΎΠ²ΠΎΠ΄Ρ?
ΠΠ°, https://codemirror.net/
ΠΡΡΡ Π»ΠΈ ΡΠΏΠΎΡΠΎΠ± ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CodeMirror Π²Π½ΡΡΡΠΈ Cloud9?
ΠΡΠ»ΠΈ ΠΎΠ½ΠΈ Π½Π΅ Ρ ΠΎΡΡΡ Π²Π½Π΅Π΄ΡΡΡΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ vue, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ, Π²Π°ΠΌ ΡΡΠΎΠΈΡ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ ΠΎ Π΅Π³ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ? ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΎΠ½ΠΈ Π΄Π°ΠΆΠ΅ Π½Π΅ ΠΎΡΠ²Π΅ΡΠ°ΡΡ...
ΠΡΠ΅Π½Ρ Π³ΡΡΡΡΠ½ΠΎ :( Vue ΡΠ°ΠΊ ΠΏΠΎΠΏΡΠ»ΡΡΠ΅Π½, Π° Ρ ΠΏΡΠ΅ΠΌΠΈΡΠΌ-ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ I. ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΡΠΊΠΎΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ.
Π§ΡΠΎ ΠΆ, ΠΏΡΠΈΡΡΠ½ΠΎΠ³ΠΎ ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΡ, ΡΠ΅ΠΌΠ° Π½Π°ΡΠ°ΡΠ° 14 Π΄Π΅ΠΊΠ°Π±ΡΡ 2015 Π³.
Π€Π°ΠΉΠ»Ρ vue @boustanihani ΠΊΠ°ΠΆΡΡΡΡ ΠΏΡΠΎΡΡΡΠΌΠΈ html-ΡΠ°ΠΉΠ»Π°ΠΌΠΈ Ρ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΈ cloud9 ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π΄Π»Ρ Π½ΠΈΡ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ html ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ https://github.com/c9/core/blob/master/node_modules/ace/lib/ace/ext/modelist .js#L94
ΠΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ΅ΠΆΠΈΠΌ ΠΈΠ»ΠΈ ΡΠ΅ΠΆΠΈΠΌ html ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π΅ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ ΠΎΠΆΠΈΠ΄Π°Π΅ΡΠ΅?
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π»ΠΈ Π²Π°Ρ HTML-ΡΠ΅ΠΆΠΈΠΌ Π°ΡΡΠΈΠ±ΡΡΡ $ lang
Π² ΡΠ΅Π³Π°Ρ
<template>
, <script>
ΠΈ <style>
?
@Piterden , Π½Π΅Ρ, ΠΎΠ½ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ html/js/css.
ΠΡΡΡ Π»ΠΈ ΡΠΏΠΈΡΠΎΠΊ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΡΡΠΈΡ
Π°ΡΡΠΈΠ±ΡΡΠΎΠ² ΡΠ·ΡΠΊΠ°?
Π€ΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²Π½ΡΡΡΠΈ ΡΠ΅Π³ΠΎΠ² <template>
ΠΈ <style>
.
@boustanihani , ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ΅, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²Ρ ΡΠ²Π»ΡΠ΅ΡΠ΅ΡΡ ΠΏΡΠ΅ΠΌΠΈΡΠΌ-ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠΌ, ΠΎΡΠΊΡΠΎΠΉΡΠ΅ Π·Π°ΡΠ²ΠΊΡ Π² ΡΠ»ΡΠΆΠ±Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΠΈ ΠΏΠΎΠΊΠ°ΠΆΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ², Π΄Π»Ρ ΠΊΠΎΡΠΎΡΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΠ²ΡΠ·Π°Π½Π° Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠΎΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ°.
Ρ ΡΠΆΠ΅ Π΄Π΅Π»Π°Π» ΡΡΠΎ ΠΌΠ΅ΡΡΡ Π½Π°Π·Π°Π΄
ΠΠΎΡ ΡΠΏΠΈΡΠΎΠΊ, @nightwing :
https://github.com/vuejs/vue-syntax-highlight/blob/master/vue.YAML-tmLanguage#L67
https://github.com/vuejs/vue-syntax-highlight/blob/master/vue.YAML-tmLanguage#L83
https://github.com/vuejs/vue-syntax-highlight/blob/master/vue.YAML-tmLanguage#L99
https://github.com/vuejs/vue-syntax-highlight/blob/master/vue.YAML-tmLanguage#L116
https://github.com/vuejs/vue-syntax-highlight/blob/master/vue.YAML-tmLanguage#L132
https://github.com/vuejs/vue-syntax-highlight/blob/master/vue.YAML-tmLanguage#L148
https://github.com/vuejs/vue-syntax-highlight/blob/master/vue.YAML-tmLanguage#L165
https://github.com/vuejs/vue-syntax-highlight/blob/master/vue.YAML-tmLanguage#L183
https://github.com/vuejs/vue-syntax-highlight/blob/master/vue.YAML-tmLanguage#L215
https://github.com/vuejs/vue-syntax-highlight/blob/master/vue.YAML-tmLanguage#L233
https://github.com/vuejs/vue-syntax-highlight/blob/master/vue.YAML-tmLanguage#L251
@Piterden ΡΠΏΠ°ΡΠΈΠ±ΠΎ, Ρ ΡΠ°Π±ΠΎΡΠ°Ρ Π½Π°Π΄ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠΈ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΏΡΠΎΡΡΠΈΡ Π²ΡΡΡΠ°ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ·ΡΠΊΠΎΠ², ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π³ΠΎΡΠΎΠ²ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ΅ΡΠ΅Π· 2 Π½Π΅Π΄Π΅Π»ΠΈ.
@boustanihani ΠΈΠ·Π²ΠΈΠ½ΠΈΡΠ΅, Ρ Π½Π΅ ΠΌΠΎΠ³Ρ Π½Π°ΠΉΡΠΈ Π½ΠΈΡΠ΅Π³ΠΎ, ΡΠ²ΡΠ·Π°Π½Π½ΠΎΠ³ΠΎ Ρ Π²Π°ΡΠΈΠΌ ΠΎΡΡΠ΅ΡΠΎΠΌ. Π Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Ρ Π²ΠΈΠΆΡ, ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΄Π»Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π²Π΅ΡΠ΅ΠΉ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ½ΠΊΠ°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°.
@nightwing ΠΡΠ»ΠΈ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΊΡΡΡΡΠΉ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄, ΡΠΎ Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠ°Ρ Π²Π΅ΡΠΎΡΡΠ½ΠΎΡΡΡ, ΡΡΠΎ ΠΌΡ Π²Π΅ΡΠ½Π΅ΠΌΡΡ ΠΎΡ CM :wink:
ΠΡΡΡ Π½ΠΎΠ²ΠΎΡΡΠΈ ΠΏΠΎ ΡΡΠΎΠΌΡ ΠΏΠΎΠ²ΠΎΠ΄Ρ?
π
Π: ΠΠ½Π΅ Π½ΡΠΆΠ½Π° ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠ° ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° Π΄Π»Ρ Pug ΠΈ Stylus Π² ΡΠ°ΠΉΠ»Π°Ρ .vue.
A: ΠΠ°ΠΊ Π½Π°ΡΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ HTML? Π― ΡΠ»ΡΡΠ°Π», ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄Π»Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π·Π°Π΄Π°Ρ...
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
@Piterden ΡΠΏΠ°ΡΠΈΠ±ΠΎ, Ρ ΡΠ°Π±ΠΎΡΠ°Ρ Π½Π°Π΄ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠΈ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΏΡΠΎΡΡΠΈΡ Π²ΡΡΡΠ°ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ·ΡΠΊΠΎΠ², ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π³ΠΎΡΠΎΠ²ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ΅ΡΠ΅Π· 2 Π½Π΅Π΄Π΅Π»ΠΈ.
@boustanihani ΠΈΠ·Π²ΠΈΠ½ΠΈΡΠ΅, Ρ Π½Π΅ ΠΌΠΎΠ³Ρ Π½Π°ΠΉΡΠΈ Π½ΠΈΡΠ΅Π³ΠΎ, ΡΠ²ΡΠ·Π°Π½Π½ΠΎΠ³ΠΎ Ρ Π²Π°ΡΠΈΠΌ ΠΎΡΡΠ΅ΡΠΎΠΌ. Π Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Ρ Π²ΠΈΠΆΡ, ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΄Π»Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π²Π΅ΡΠ΅ΠΉ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ½ΠΊΠ°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°.