Fryboyter

Maskieren von Text in Snippets bei VS Code

Urlaubszeit ist bei mir Bastelzeit. Daher bin ich gerade dabei mal wieder VS Code zu testen, obwohl ich mir vorab schon sicher bin, dass ich bei Sublime Text bleiben werde. Na ja egal, darum geht es gerade nicht.

Damit ich relativ bequem Artikel veröffentlichen kann, habe ich mir unter Sublime Text diverse Snippets angelegt. Bei einem geht es darum, dass ich Text markiere und per Shortcut der HTML-Code hinzugefügt wird, mit dem ich Text als Code hervorhebe. Somit wird zum Beispiel aus “10 PRINT “hallo welt”” folgendes.

<pre class="line-numbers language-bash" style="white-space:pre-wrap;">
<code class="language-bash">10 PRINT "hallo welt"</code>
</pre>

Unter VS Code habe ich mir folgendes Snippet angelegt.

"wrap_highlight": {
		"prefix": "wrap_highlight",
		"body": [
			"<pre class="line-numbers language-bash" style="white-space:pre-wrap;">",
			"<code class="language-bash">$TM_SELECTED_TEXT</code>",
			"</pre>"
		],
		"description": "Highlight Code"
	},

Sieht eigentlich ganz gut aus, macht aber nicht was es soll. Denn als Ausgabe erhält man folgendes.

<pre class=
 style=
<code class=
>10 PRINT "hallo welt"</code>
</pre>

Die Lösung ist in dem Fall allerdings recht einfach. Die Ursache ist die fehlende Maskierung (auch escapen genannt) der Anführungszeichen innerhalb des Bereichs “body”.

"wrap_highlight": {
		"prefix": "wrap_highlight",
		"body": [
			"<pre class=\"line-numbers language-bash\" style=\"white-space:pre-wrap;\">",
			"<code class=\"language-bash\">$TM_SELECTED_TEXT</code>",
			"</pre>"
		],
		"description": "Highlight Code"
	},

Ändert man das Snippet wie oben angegeben macht es auch das, was es soll.

• Mehrere Befehle mit einem Shortcut unter VS Code ausführen
• VS Code friert nach dem Starten ein
• VS Code - Snippet für Front Matter anlegen