{"id":3143,"date":"2022-02-07T22:40:47","date_gmt":"2022-02-07T21:40:47","guid":{"rendered":"http:\/\/blogperso.union31.fr\/?p=3143"},"modified":"2022-02-12T00:59:51","modified_gmt":"2022-02-11T23:59:51","slug":"emmet","status":"publish","type":"post","link":"https:\/\/blogperso.union31.fr\/?p=3143","title":{"rendered":"Emmet toolkit"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Sommaire<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#I_Introduction\" >I Introduction<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#II_Installation\" >II Installation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#III_Quelques_exemples_pour_du_code_HTML\" >III Quelques exemples pour du code HTML<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#III1_Element_simple\" >III.1 \u00c9l\u00e9ment simple<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#III2_Elements_enfants_via_%C2%AB_%3E_%C2%BB\" >III.2 \u00c9l\u00e9ments enfants via \u00ab\u00a0&gt;\u00a0\u00bb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#III3_Elements_de_meme_parent_via_%C2%AB_%C2%BB\" >III.3 \u00c9l\u00e9ments de m\u00eame parent via \u00ab\u00a0+\u00a0\u00bb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#III4_Melange_des_operateurs\" >III.4 M\u00e9lange des op\u00e9rateurs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#III5_Remonter_dun_niveau_au_sein_dune_chaine_via_%C2%AB_%C2%BB\" >III.5 Remonter d&rsquo;un niveau au sein d&rsquo;une chaine via \u00ab\u00a0^\u00a0\u00bb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#III6_Le_multiplicateur_via_%C2%AB_%C2%BB\" >III.6 Le multiplicateur via \u00ab\u00a0*\u00a0\u00bb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#III7_Le_groupe_via_%C2%AB_%C2%BB\" >III.7 Le groupe via \u00ab\u00a0()\u00a0\u00bb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#III8_Operateurs_dattributs\" >III.8 Op\u00e9rateurs d&rsquo;attributs<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#III81_Operateur_dobjet_id_via_%C2%AB_%C2%BB\" >III.8.1 Op\u00e9rateur d&rsquo;objet (id) via \u00ab\u00a0#\u00a0\u00bb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#III82_Operateur_de_classe_via_%C2%AB_%C2%BB\" >III.8.2 Op\u00e9rateur de classe via \u00ab\u00a0.\u00a0\u00bb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#III83_Operateur_dattribut_des_balises_html_via_%C2%AB_%C2%BB\" >III.8.3 Op\u00e9rateur d&rsquo;attribut des balises html via \u00ab\u00a0[]\u00a0\u00bb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#III84_Operateur_de_numerotation_via_%C2%AB_%C2%BB\" >III.8.4 Op\u00e9rateur de num\u00e9rotation via \u00ab\u00a0$\u00a0\u00bb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#III85_Operateur_de_texte_via_%C2%AB_%C2%BB\" >III.8.5 Op\u00e9rateur de texte via \u00ab\u00a0{}\u00a0\u00bb<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#III9_generer_des_%C2%AB_Lorem_ipsum_%C2%BB\" >III.9 g\u00e9n\u00e9rer des \u00ab\u00a0Lorem ipsum\u00a0\u00bb<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#IV_avec_du_CSS\" >IV avec du CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#IV1_Presentation_generale\" >IV.1 Pr\u00e9sentation g\u00e9n\u00e9rale<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#IV2_Liste_des_abreviations\" >IV.2 Liste des abr\u00e9viations<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#V_Personnalisation\" >V Personnalisation<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#V1_Introduction\" >V.1 Introduction<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#V2_Avec_Visual_Studio_Code\" >V.2 Avec Visual Studio Code<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#V3_Exemple_de_snippets\" >V.3 Exemple de snippets<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#V31_Structure_dun_snippet\" >V.3.1 Structure d&rsquo;un snippet<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#V32_Exemple_simple\" >V.3.2 Exemple simple<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#V33_Snippet_avec_code_condense\" >V.3.3 Snippet avec code condens\u00e9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#V34_Les_%C2%AB_TabStop_%C2%BB\" >V.3.4 Les \u00ab\u00a0TabStop\u00a0\u00bb<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/blogperso.union31.fr\/?p=3143\/#VI_Pour_allez_plus_loin\" >VI Pour allez plus loin<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"i-introduction\"><span class=\"ez-toc-section\" id=\"I_Introduction\"><\/span>I Introduction<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Originellement connu sous le nom de \u00ab\u00a0Zen Coding\u00a0\u00bb (2009-2012), Emmet est un moteur de compl\u00e9tion principalement d\u00e9di\u00e9 \u00e9crire du code HTML, CSS et XSL. <\/p>\n\n\n\n<p>L&rsquo;id\u00e9e est d&rsquo;obtenir \u00e0 partir d&rsquo;une \u00e9criture condens\u00e9e des lignes de codes.<\/p>\n\n\n\n<p>Exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">span&gt;textearea<\/code><\/pre>\n\n\n\n<p>donne<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">    &lt;span&gt;\n        &lt;textearea&gt;&lt;\/textearea&gt;\n    &lt;\/span&gt;<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ii-installation\"><span class=\"ez-toc-section\" id=\"II_Installation\"><\/span>II Installation <span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ce mode de compl\u00e9tion est par exemple nativement int\u00e9gr\u00e9 dans des ide ou \u00e9diteurs de code tel que  Visual Studio Code par exemple. <\/p>\n\n\n\n<p>Pour les EDI ou \u00e9diteurs qui n&rsquo;int\u00e8grent pas ce moteur de compl\u00e9tion, la liste des plugins se trouve ici : <a rel=\"noreferrer noopener\" href=\"https:\/\/emmet.io\/download\/\" target=\"_blank\">https:\/\/emmet.io\/download\/<\/a>. A savoir qu&rsquo;il est possible de faire de l&rsquo;Emmet dans VIM \ud83d\ude42<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"iii-quelques-exemples-pour-du-code-html\"><span class=\"ez-toc-section\" id=\"III_Quelques_exemples_pour_du_code_HTML\"><\/span>III Quelques exemples pour du code HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"iii-1-element-simple\"><span class=\"ez-toc-section\" id=\"III1_Element_simple\"><\/span>III.1 \u00c9l\u00e9ment simple<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pour \u00e9crire une balise : <strong>\u00ab\u00a0div\u00a0\u00bb<\/strong> donne<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;div&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"iii-2-elements-enfants-via\"><span class=\"ez-toc-section\" id=\"III2_Elements_enfants_via_%C2%AB_%3E_%C2%BB\"><\/span>III.2 \u00c9l\u00e9ments enfants via \u00ab\u00a0&gt;\u00a0\u00bb<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>L&rsquo;imbrication des \u00e9l\u00e9ments se fait par le caract\u00e8re \u00ab\u00a0<strong>&gt;<\/strong>\u00ab\u00a0<\/p>\n\n\n\n<p>Ainsi \u00ab\u00a0<strong>div&gt;span&gt;a<\/strong>\u00a0\u00bb donne :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;div&gt;&lt;span&gt;&lt;a href=\"\"&gt;&lt;\/a&gt;&lt;\/span&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"iii-3-elements-de-meme-parent-via\"><span class=\"ez-toc-section\" id=\"III3_Elements_de_meme_parent_via_%C2%AB_%C2%BB\"><\/span>III.3 \u00c9l\u00e9ments de m\u00eame parent via \u00ab\u00a0+\u00a0\u00bb<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>L&rsquo;ajout de plusieurs \u00e9l\u00e9ments sous le m\u00eame parent utilise le symbole \u00ab\u00a0+\u00a0\u00bb.<\/p>\n\n\n\n<p>Ainsi \u00ab\u00a0<strong>div&gt;A+span+textarea<\/strong>\u00a0\u00bb donne:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;div&gt;&lt;A&gt;&lt;\/A&gt;&lt;span&gt;&lt;\/span&gt;&lt;textarea name=\"\" id=\"\" cols=\"30\" rows=\"10\"&gt;&lt;\/textarea&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Autre exemple : \u00ab\u00a0<strong>div+div+span<\/strong>\u00a0\u00bb donne<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">    &lt;div&gt;&lt;\/div&gt;\n    &lt;div&gt;&lt;\/div&gt;\n    &lt;span&gt;&lt;\/span&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"iii-4-melange-des-operateurs\"><span class=\"ez-toc-section\" id=\"III4_Melange_des_operateurs\"><\/span>III.4 M\u00e9lange des op\u00e9rateurs<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Les op\u00e9rateurs peuvent \u00eatre m\u00e9lang\u00e9 \u00e0 souhait.<\/p>\n\n\n\n<p>Exemple \u00ab\u00a0<strong>div&gt;ul&gt;li+li+li<\/strong>\u00a0\u00bb donne :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">    &lt;div&gt;\n        &lt;ul&gt;\n            &lt;li&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;\/li&gt;\n        &lt;\/ul&gt;\n    &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"iii-5-remonter-d-un-niveau-au-sein-d-une-chaine-via\"><span class=\"ez-toc-section\" id=\"III5_Remonter_dun_niveau_au_sein_dune_chaine_via_%C2%AB_%C2%BB\"><\/span>III.5 Remonter d&rsquo;un niveau au sein d&rsquo;une chaine via \u00ab\u00a0^\u00a0\u00bb<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Lors de l&rsquo;\u00e9criture condens\u00e9e les chaines s&rsquo;imbriques suivant plusieurs niveaux. Il peut y avoir le besoin de remont\u00e9 d&rsquo;un niveau et continuer \u00e0 \u00e9crire son code. Pour cela on utilise l\u2019op\u00e9rateur \u00ab\u00a0^\u00a0\u00bb.<\/p>\n\n\n\n<p>L&rsquo;exemple \u00ab\u00a0<strong>div&gt;ul&gt;li^span<\/strong>\u00a0\u00bb donne :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">    &lt;div&gt;\n        &lt;ul&gt;\n            &lt;li&gt;&lt;\/li&gt;\n        &lt;\/ul&gt;\n        &lt;span&gt;&lt;\/span&gt;    &lt;-- le span n'est pas dans le &lt;ul&gt;\n    &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"iii-6-le-multiplicateur-via\"><span class=\"ez-toc-section\" id=\"III6_Le_multiplicateur_via_%C2%AB_%C2%BB\"><\/span>III.6 Le multiplicateur via \u00ab\u00a0*\u00a0\u00bb<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Il est possible de r\u00e9peter autant de fois l&rsquo;\u00e9criture d&rsquo;une balise. L&rsquo;op\u00e9rateur \u00ab\u00a0*\u00a0\u00bb sera utilis\u00e9.<\/p>\n\n\n\n<p>Ainsi \u00ab\u00a0<strong>ul&gt;li*5<\/strong>\u00a0\u00bb donne :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">    &lt;ul&gt;\n        &lt;li&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;<\/code><\/pre>\n\n\n\n<p>ou \u00ab\u00a0<strong>ul&gt;li*2^ul&gt;li*4<\/strong>\u00a0\u00bb donne :<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code lang=\"markup\" class=\"language-markup\">    &lt;ul&gt;\n        &lt;li&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;\n    &lt;ul&gt;\n        &lt;li&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"iii-7-le-groupe-via\"><span class=\"ez-toc-section\" id=\"III7_Le_groupe_via_%C2%AB_%C2%BB\"><\/span>III.7 Le groupe via \u00ab\u00a0()\u00a0\u00bb<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Il est possible de d\u00e9finir un groupe qui agira seul une fois combin\u00e9 avec d&rsquo;autres s\u00e9quence. Cela \u00e9vite d&rsquo;utiliser \u00e0 plusieurs reprises la remont\u00e9e de cha\u00eene.<\/p>\n\n\n\n<p>Ainsi \u00ab\u00a0(div&gt;ul&gt;li*3)+div\u00a0\u00bb donne :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">    &lt;div&gt;\n        &lt;ul&gt;\n            &lt;li&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;\/li&gt;\n        &lt;\/ul&gt;\n    &lt;\/div&gt;\n    &lt;div&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>et \u00ab\u00a0<strong>(div&gt;ul&gt;li*3)&gt;div<\/strong>\u00a0\u00bb donne exactement le m\u00eame r\u00e9sultat :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">    &lt;div&gt;\n        &lt;ul&gt;\n            &lt;li&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;\/li&gt;\n        &lt;\/ul&gt;\n    &lt;\/div&gt;\n    &lt;div&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"iii-8-operateurs-d-attributs\"><span class=\"ez-toc-section\" id=\"III8_Operateurs_dattributs\"><\/span>III.8 Op\u00e9rateurs d&rsquo;attributs<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Gr\u00e2ce \u00e0 ces op\u00e9rateurs il va \u00eatre possible de d\u00e9finir un objet ou une classe pour une balise. Il sera \u00e9galement possible de mettre en place un compteur.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"iii-8-1-operateur-d-objet-id-via\"><span class=\"ez-toc-section\" id=\"III81_Operateur_dobjet_id_via_%C2%AB_%C2%BB\"><\/span>III.8.1 Op\u00e9rateur d&rsquo;objet (id) via \u00ab\u00a0#\u00a0\u00bb<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Ainsi \u00ab\u00a0<strong>div#mon_id<\/strong>\u00a0\u00bb donne :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;div id=\"mon_id\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"iii-8-2-operateur-de-classe-via\"><span class=\"ez-toc-section\" id=\"III82_Operateur_de_classe_via_%C2%AB_%C2%BB\"><\/span> III.8.2 Op\u00e9rateur de classe via \u00ab\u00a0.\u00a0\u00bb<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>L&rsquo;exemple \u00ab\u00a0<strong>ul&gt;li.puce<\/strong>\u00a0\u00bb donne :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">    &lt;ul&gt;\n        &lt;li class=\"puce\"&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"iii-8-3-operateur-d-attribut-des-balises-html-via\"><span class=\"ez-toc-section\" id=\"III83_Operateur_dattribut_des_balises_html_via_%C2%AB_%C2%BB\"><\/span>III.8.3 Op\u00e9rateur d&rsquo;attribut des balises html via \u00ab\u00a0[]\u00a0\u00bb<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Pour sp\u00e9cifier un u plusieurs attributs il faut utiliser l&rsquo;op\u00e9rateur \u00ab\u00a0[]\u00a0\u00bb qui contiendra tous les attributs souhait\u00e9s.<\/p>\n\n\n\n<p>L&rsquo;exemple \u00ab\u00a0<strong>img[width=\u00a0\u00bb100&Prime; height=\u00a0\u00bb50&Prime;]<\/strong>\u00a0\u00bb donne :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;img src=\"\" alt=\"\" width=\"100\" height=\"50\"&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"iii-8-4-operateur-de-numerotation-via\"><span class=\"ez-toc-section\" id=\"III84_Operateur_de_numerotation_via_%C2%AB_%C2%BB\"><\/span>III.8.4 Op\u00e9rateur de num\u00e9rotation via \u00ab\u00a0$\u00a0\u00bb<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Cet op\u00e9rateur permet de faire un incr\u00e9ment de num\u00e9ro.<\/p>\n\n\n\n<p>L&rsquo;exemple \u00ab\u00a0<strong>ul&gt;li.ma_classe$*5<\/strong>\u00a0\u00bb donne :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">    &lt;ul&gt;\n        &lt;li class=\"ma_classe1\"&gt;&lt;\/li&gt;\n        &lt;li class=\"ma_classe2\"&gt;&lt;\/li&gt;\n        &lt;li class=\"ma_classe3\"&gt;&lt;\/li&gt;\n        &lt;li class=\"ma_classe4\"&gt;&lt;\/li&gt;\n        &lt;li class=\"ma_classe5\"&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;<\/code><\/pre>\n\n\n\n<p>Il est possible d\u2019inverser la num\u00e9rotation. Ainsi le code \u00ab\u00a0<strong>div&gt;div.ma_classe$@-*5<\/strong>\u00a0\u00bb donne :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">    &lt;div&gt;\n        &lt;div class=\"ma_classe5\"&gt;&lt;\/div&gt;\n        &lt;div class=\"ma_classe4\"&gt;&lt;\/div&gt;\n        &lt;div class=\"ma_classe3\"&gt;&lt;\/div&gt;\n        &lt;div class=\"ma_classe2\"&gt;&lt;\/div&gt;\n        &lt;div class=\"ma_classe1\"&gt;&lt;\/div&gt;\n    &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Il est \u00e9galement possible de commencer par un num\u00e9ro pr\u00e9d\u00e9fini. AInsi \u00ab\u00a0<strong>div&gt;ul.ma_classe$@10*5<\/strong>\u00a0\u00bb donne :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">    &lt;div&gt;\n        &lt;ul class=\"ma_classe10\"&gt;&lt;\/ul&gt;\n        &lt;ul class=\"ma_classe11\"&gt;&lt;\/ul&gt;\n        &lt;ul class=\"ma_classe12\"&gt;&lt;\/ul&gt;\n        &lt;ul class=\"ma_classe13\"&gt;&lt;\/ul&gt;\n        &lt;ul class=\"ma_classe14\"&gt;&lt;\/ul&gt;\n    &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"iii-8-5-operateur-de-texte-via\"><span class=\"ez-toc-section\" id=\"III85_Operateur_de_texte_via_%C2%AB_%C2%BB\"><\/span>III.8.5 Op\u00e9rateur de texte via \u00ab\u00a0{}\u00a0\u00bb<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Cet op\u00e9rateur permet de d\u00e9finir du texte entre les balises.<\/p>\n\n\n\n<p>Ainsi \u00ab\u00a0<strong>p{mon texte}<\/strong>\u00a0\u00bb donne :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;p&gt;mon texte&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>Autre exemple : \u00ab\u00a0<strong>p&gt;{mon texte}+u{soulign\u00e9}{et pas ici et au sein du paragraphe}<\/strong>\u00a0\u00bb donne<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;p&gt;mon texte&lt;u&gt;soulign\u00e9&lt;\/u&gt;et pas ici et au sein du paragraphe&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"iii-9-generer-des-lorem-ipsum\"><span class=\"ez-toc-section\" id=\"III9_generer_des_%C2%AB_Lorem_ipsum_%C2%BB\"><\/span>III.9 g\u00e9n\u00e9rer des \u00ab\u00a0Lorem ipsum\u00a0\u00bb<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Il faut utiliser l\u2019abr\u00e9viation \u00ab\u00a0<strong>lorem<\/strong>\u00a0\u00bb qui donne :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Libero cumque aut odit tempora atque, enim, accusamus reprehenderit quae, qui corrupti pariatur neque. Consequuntur velit natus perspiciatis quos provident aliquid in?<\/code><\/pre>\n\n\n\n<p>Il est possible de d\u00e9finir un nombre de mot an ajoutant un chiffre ainsi \u00ab\u00a0lorem5\u00a0\u00bb donne :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">Lorem ipsum dolor sit amet.<\/code><\/pre>\n\n\n\n<p>Et avec la multiplication comme \u00ab\u00a0<strong>div*4&gt;lorem10<\/strong>\u00a0\u00bb cela donne<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">    &lt;div&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, minus?&lt;\/div&gt;\n    &lt;div&gt;Voluptas accusantium assumenda perspiciatis earum omnis quasi illum, maxime aspernatur!&lt;\/div&gt;\n    &lt;div&gt;Rerum magnam minima aspernatur quidem explicabo tempore magni consectetur nam.&lt;\/div&gt;\n    &lt;div&gt;Omnis distinctio laboriosam fuga repellat reiciendis recusandae eius eligendi illo.&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"iv-avec-du-css\"><span class=\"ez-toc-section\" id=\"IV_avec_du_CSS\"><\/span>IV avec du CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"iv-1-presentation-generale\"><span class=\"ez-toc-section\" id=\"IV1_Presentation_generale\"><\/span>IV.1 Pr\u00e9sentation g\u00e9n\u00e9rale<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>L&rsquo;utilisation d&rsquo;Emmet pour le CSS semble plus fastidieux. En effet, moins intuitif au premier abord, il faudra utiliser des abr\u00e9viations sp\u00e9cifiques intuitives ou pas&#8230;. <\/p>\n\n\n\n<p>Ainsi \u00ab\u00a0<strong>m<\/strong>\u00a0\u00bb pour margin donne :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">margin: ;<\/code><\/pre>\n\n\n\n<p>il est possible d&rsquo;y ins\u00e9rer des valeurs comme \u00ab\u00a0<strong>m10px<\/strong>\u00a0\u00bb qui donner :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">margin: 10px;<\/code><\/pre>\n\n\n\n<p>Il est \u00e9glement possible d&rsquo;ajouter d&rsquo;autres attributs comme important. Le symbole \u00ab\u00a0!\u00a0\u00bb sera utilis\u00e9. Dans cette chaine &lsquo;m20px! donnera :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">margin: 20px !important;<\/code><\/pre>\n\n\n\n<p>Pour ajouter plusieurs valeurs, l&rsquo;exemple \u00ab\u00a0m10px-12px-10px-12px\u00a0\u00bb donne :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">margin: 10px -12px -10px -12px;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"iv-2-liste-des-abreviations\"><span class=\"ez-toc-section\" id=\"IV2_Liste_des_abreviations\"><\/span>IV.2 Liste des abr\u00e9viations<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Les lister ici ne va qu\u2019alourdir la page. Pour cela ne pas h\u00e9siter \u00e0 utiliser l&rsquo;aide m\u00e9moire fournit sur le site officiel : <a href=\"https:\/\/docs.emmet.io\/cheat-sheet\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/docs.emmet.io\/cheat-sheet\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"v-personnalisation\"><span class=\"ez-toc-section\" id=\"V_Personnalisation\"><\/span>V Personnalisation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"v-1-introduction\"><span class=\"ez-toc-section\" id=\"V1_Introduction\"><\/span>V.1 Introduction<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Il est possible de d\u00e9finir ces propres \u00ab\u00a0mot de compl\u00e9tions\u00a0\u00bb.  Pour cela il faut les renseigner dans un fichier JSON. D&rsquo;apr\u00e8s le site officiel tous les \u00e9l\u00e9ments EMMET suppl\u00e9mentaires doivent \u00eatre inscrits dans un fichier nomm\u00e9 \u00ab\u00a0snippets.json\u00a0\u00bb. Dans le cas de l&rsquo;EDI Vscode ce sera diff\u00e9rent.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"v-2-avec-visual-studio-code\"><span class=\"ez-toc-section\" id=\"V2_Avec_Visual_Studio_Code\"><\/span>V.2 Avec Visual Studio Code<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Sous Visual Studio Code, il peut y avoir autant de fichier .json que souhait\u00e9, et ce, par type de langage si on le souhaite et sous les noms de fichiers que l&rsquo;on veut.<\/p>\n\n\n\n<p>Pour cela, cliquer sur le bouton param\u00e8tres (roue crant\u00e9e) puis sur \u00ab\u00a0User Snippets\u00a0\u00bb :<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/02\/vscode_snippets1-2.png\" alt=\"\" class=\"wp-image-3215\" width=\"347\" height=\"408\" srcset=\"https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/02\/vscode_snippets1-2.png 556w, https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/02\/vscode_snippets1-2-255x300.png 255w\" sizes=\"auto, (max-width: 347px) 100vw, 347px\" \/><\/figure>\n\n\n\n<p> <\/p>\n\n\n\n<p>Il appara\u00eet en haut de l&rsquo;EDI une liste  de fichiers de configuration existante ou \u00e0 cr\u00e9er. Dans notre cas nous allons utiliser le fichier existant html.css<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"794\" height=\"335\" src=\"http:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/02\/vscode_snippets2.png\" alt=\"\" class=\"wp-image-3216\" srcset=\"https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/02\/vscode_snippets2.png 794w, https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/02\/vscode_snippets2-300x127.png 300w, https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/02\/vscode_snippets2-768x324.png 768w\" sizes=\"auto, (max-width: 794px) 100vw, 794px\" \/><\/figure>\n\n\n\n<p>Ainsi le fichier est ouvert comme suivant :<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"359\" src=\"http:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/02\/vscode_snippets3-1024x359.png\" alt=\"\" class=\"wp-image-3217\" srcset=\"https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/02\/vscode_snippets3-1024x359.png 1024w, https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/02\/vscode_snippets3-300x105.png 300w, https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/02\/vscode_snippets3-768x269.png 768w, https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/02\/vscode_snippets3.png 1464w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>On remarquera que le fichier est stock\u00e9 dans le profil utilisateur dans &#8230;..\/.config\/Code\/User\/snippets\/html.json<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"v-3-exemple-de-snippets\"><span class=\"ez-toc-section\" id=\"V3_Exemple_de_snippets\"><\/span>V.3 Exemple de snippets<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"v-3-1-structure-d-un-snippet\"><span class=\"ez-toc-section\" id=\"V31_Structure_dun_snippet\"><\/span>V.3.1 Structure d&rsquo;un snippet<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>La d\u00e9finition d&rsquo;un \u00ab\u00a0snippet\u00a0\u00bb doit utiliser une structure json. Cette structure comprendra les 3 sections suivantes :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>le nom du snippet ;<ul><li>le \u00ab\u00a0description\u00a0\u00bb du snippet qui permettra de donner une description plus compl\u00e8te ;<\/li><li>le \u00ab\u00a0prefix\u00a0\u00bb du snippet, c&rsquo;est \u00e0 dire la forme condens\u00e9e ;<\/li><li>le \u00ab\u00a0body\u00a0\u00bb qui contiendra le code long associ\u00e9.<\/li><\/ul><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"v-3-2-exemple-simple\"><span class=\"ez-toc-section\" id=\"V32_Exemple_simple\"><\/span>V.3.2 Exemple simple<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Ci-dessous un premier exemple pour comprendre :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"json\" class=\"language-json\">\t\"mon snippet\" : {\n\t\t\"prefix\" : \"mon_snippet\",\n\t\t\"body\" : \"&lt;div class= \\\"Mon_snippet\\\"&gt;\\r\\tMon texte\\r&lt;\/div&gt;\",\n\t\t\"description\" : \"mon premier snippet\"\n\t}<\/code><\/pre>\n\n\n\n<p>Ce qui dans l&rsquo;EDI se verra de la mani\u00e8re suivante :<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/02\/vscode_snippets4.png\" alt=\"\" class=\"wp-image-3221\" width=\"701\" height=\"168\" srcset=\"https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/02\/vscode_snippets4.png 1004w, https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/02\/vscode_snippets4-300x72.png 300w, https:\/\/blogperso.union31.fr\/wp-content\/uploads\/2022\/02\/vscode_snippets4-768x184.png 768w\" sizes=\"auto, (max-width: 701px) 100vw, 701px\" \/><\/figure>\n\n\n\n<p>et qui g\u00e9n\u00e9rera le code suivant :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">\t&lt;div class= \"Mon_snippet\"&gt;\n\t\tMon texte\n\t&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Pour la mise en forme ainsi de la propri\u00e9t\u00e9 \u00ab\u00a0body\u00a0\u00bb du texte il a \u00e9t\u00e9 utilis\u00e9 :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\\r pour le retour \u00e0 la ligne,<\/li><li>\\t pour la tabulation<\/li><\/ul>\n\n\n\n<p>Pour \u00e9viter d&rsquo;\u00e9crire des retours \u00e0 la ligne et avoir un body plus joli \u00e0 lire, la propri\u00e9t\u00e9 body peut \u00eatre un tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"json\" class=\"language-json\">    \"mon_snippet2\": {\n        \"prefix\": \"mon_snippet\",\n        \"body\": [\n          \"&lt;div class= \\\"Mon_snippet\\\"&gt;\",\n          \"  Mon texte\",\n          \"&lt;\/div&gt;\"\n        ],\n        \"description\": \"mon_snippet2\"\n      }<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"v-3-3-snippet-avec-code-condense\"><span class=\"ez-toc-section\" id=\"V33_Snippet_avec_code_condense\"><\/span>V.3.3 Snippet avec code condens\u00e9<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Le \u00ab\u00a0body\u00a0\u00bb d&rsquo;un snippet peut contenir du code condens\u00e9 comme suivant :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"json\" class=\"language-json\">\t\"mon snippet\" : {\n\t\t\"prefix\" : \"mon_snippet\",\n\t\t\"body\" : \"ul&gt;li*3\",\n\t\t\"description\" : \"mon premier snippet\"\n\t}<\/code><\/pre>\n\n\n\n<p>Mais ce n&rsquo;est pas conseill\u00e9 (avec Visual Studio Code) car :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>il faudra \u00ab\u00a0tabuler 2 fois\u00a0\u00bb,<\/li><li>le code \u00e0 relire sera plus compliqu\u00e9&#8230;<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"v-3-4-les-tabstop\"><span class=\"ez-toc-section\" id=\"V34_Les_%C2%AB_TabStop_%C2%BB\"><\/span>V.3.4 Les \u00ab\u00a0TabStop\u00a0\u00bb<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Tous les \u00e9diteurs ne prennent pas en compte cette fonctionnalit\u00e9. Pour l&rsquo;EDI Visual Studio Code c&rsquo;est le cas.<\/p>\n\n\n\n<p>Les \u00ab\u00a0TabStop\u00a0\u00bb permettent de modifier le code g\u00e9n\u00e9r\u00e9 tr\u00e8s rapidement par simple appui sur le bouton Tabulation. A chaque fois le curseur sera positionn\u00e9 sur l&rsquo;\u00e9l\u00e9ment pr\u00eat \u00e0 \u00eatre modifier. Pour quitter ce mode d&rsquo;\u00e9dition, il suffira de taper sur la touche\u00a0\u00bbEchap\u00a0\u00bb.<\/p>\n\n\n\n<p>Les \u00ab\u00a0TabStop\u00a0\u00bb sont repr\u00e9sent\u00e9 par le symb\u00f4le \u00ab\u00a0$\u00a0\u00bb suivi d&rsquo;un num\u00e9ro comme par exemple $1 ou ${texte} pour s\u00e9lectionner une propri\u00e9t\u00e9 enti\u00e8re.<\/p>\n\n\n\n<p>Premier exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"json\" class=\"language-json\">    \"mon_snippet2\": {\n        \"prefix\": \"mon_snippet\",\n        \"body\": [\n          \"&lt;div class= \\\"${Mon_snippet}\\\"&gt;\",\n          \"  Mon texte\",\n          \"&lt;\/div&gt;\",\n\t\t  \"&lt;div class= \\\"${Mon_snippet}\\\"&gt;\",\n          \"  Mon texte\",\n          \"&lt;\/div&gt;\"\n        ],\n        \"description\": \"mon_snippet2\"\n      }<\/code><\/pre>\n\n\n\n<p>ce qui g\u00e9n\u00e9rera :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">  &lt;div class= \"Mon_snippet\"&gt;\n\tMon texte\n  &lt;\/div&gt;\n  &lt;div class= \"Mon_snippet\"&gt;\n\tMon texte\n  &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Ensuite le curseur se placera au d\u00e9but de \u00ab\u00a0Mon_snippet\u00a0\u00bb. Puis d\u00e8s \u00e9criture, la chaine \u00ab\u00a0Mon_Snippet\u00a0\u00bb sera enti\u00e8rement remplac\u00e9e, et ce, pour les 2 div simultan\u00e9ment.<\/p>\n\n\n\n<p>Bref, cela augmente encore plus la rapidit\u00e9 d&rsquo;\u00e9criture du code &#8230; \ud83d\ude42<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"vi-pour-allez-plus-loin\"><span class=\"ez-toc-section\" id=\"VI_Pour_allez_plus_loin\"><\/span>VI Pour allez plus loin<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ici s&rsquo;arr\u00eate l\u2019aper\u00e7u du mode d&rsquo;\u00e9criture en mode EMMET. L&rsquo;ensemble des fonctionnalit\u00e9s n&rsquo;ont pas \u00e9t\u00e9 abord\u00e9es comme les filtres et les actions. Pour aller plus en profondeur ne pas h\u00e9siter \u00e0 consulter :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>le site officiel : <a rel=\"noreferrer noopener\" href=\"https:\/\/docs.emmet.io\/\" target=\"_blank\">https:\/\/docs.emmet.io\/<\/a><\/li><li>le site de Visual Studio Code pour son impl\u00e9mentation de mani\u00e8re g\u00e9n\u00e9rale : <a rel=\"noreferrer noopener\" href=\"https:\/\/code.visualstudio.com\/docs\/editor\/emmet\" target=\"_blank\">https:\/\/code.visualstudio.com\/docs\/editor\/emmet<\/a><\/li><\/ul>\n\n\n\n<p>L&rsquo;EMMET code ne se limite pas non plus au HTML ou au CSS. Il peut \u00eatre utilis\u00e9 pour des langages comme JavaScript, PHP ou java &#8230;<\/p>\n\n\n\n<p>Outils :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u00e9diteur online pour l&rsquo;\u00e9criture de snippets : <a rel=\"noreferrer noopener\" href=\"https:\/\/snippet-generator.app\/\" target=\"_blank\">https:\/\/snippet-generator.app\/<\/a><ul><li>tr\u00e8s utile car \u00e0 partir d&rsquo;un copier\/coller d&rsquo;un code et deux propri\u00e9t\u00e9s \u00e0 renseigner, le snippets est directement g\u00e9n\u00e9r\u00e9 en JSON<\/li><\/ul><\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I Introduction Originellement connu sous le nom de \u00ab\u00a0Zen Coding\u00a0\u00bb (2009-2012), Emmet est un moteur de compl\u00e9tion principalement d\u00e9di\u00e9 \u00e9crire du code HTML, CSS et XSL. L&rsquo;id\u00e9e est d&rsquo;obtenir \u00e0 partir d&rsquo;une \u00e9criture condens\u00e9e des lignes de codes. Exemple :<\/p>\n","protected":false},"author":1,"featured_media":3237,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-3143","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-_dev"],"_links":{"self":[{"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=\/wp\/v2\/posts\/3143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3143"}],"version-history":[{"count":65,"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=\/wp\/v2\/posts\/3143\/revisions"}],"predecessor-version":[{"id":3236,"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=\/wp\/v2\/posts\/3143\/revisions\/3236"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=\/wp\/v2\/media\/3237"}],"wp:attachment":[{"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3143"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}