backticks

packages/svelte/messages/compile-errors/template.md

@@ -190,7 +190,7 @@
 
 ## node_invalid_placement
 
-> %thing% is invalid inside <%parent%>
+> %thing% is invalid inside `<%parent%>`
 
 HTML has some restrictions where certain elements can appear. For example, a `<div>` inside a `<p>` is invalid. Some violations "only" result in invalid HTML, others result in the HTML being repaired by the browser, resulting in content shifting around. Some examples:
 

packages/svelte/messages/compile-warnings/template.md

@@ -40,7 +40,7 @@
 
 ## node_invalid_placement_ssr
 
-> %thing% is invalid inside <%parent%>. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning
+> %thing% is invalid inside `<%parent%>`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning
 
 HTML has some restrictions where certain elements can appear. For example, a `<div>` inside a `<p>` is invalid. Some violations "only" result in invalid HTML, others result in the HTML being repaired by the browser, resulting in content shifting around. Some examples:
 

packages/svelte/src/compiler/errors.js

@@ -978,14 +978,14 @@ export function mixed_event_handler_syntaxes(node, name) {
 }
 
 /**
- * %thing% is invalid inside <%parent%>
+ * %thing% is invalid inside `<%parent%>`
  * @param {null | number | NodeLike} node
  * @param {string} thing
  * @param {string} parent
  * @returns {never}
  */
 export function node_invalid_placement(node, thing, parent) {
-	e(node, "node_invalid_placement", `${thing} is invalid inside <${parent}>`);
+	e(node, "node_invalid_placement", `${thing} is invalid inside \`<${parent}>\``);
 }
 
 /**

packages/svelte/src/compiler/phases/2-analyze/validation.js

@@ -624,9 +624,13 @@ const validation = {
 					) {
 						if (!is_tag_valid_with_parent(node.name, context.state.parent_element)) {
 							if (only_warn) {
-								w.node_invalid_placement_ssr(node, `<${node.name}>`, context.state.parent_element);
+								w.node_invalid_placement_ssr(
+									node,
+									`\`<${node.name}>\``,
+									context.state.parent_element
+								);
 							} else {
-								e.node_invalid_placement(node, `<${node.name}>`, context.state.parent_element);
+								e.node_invalid_placement(node, `\`<${node.name}>\``, context.state.parent_element);
 							}
 						}
 
@@ -635,9 +639,9 @@ const validation = {
 				} else if (ancestor.type === 'RegularElement') {
 					if (!is_tag_valid_with_ancestor(node.name, ancestor.name)) {
 						if (only_warn) {
-							w.node_invalid_placement_ssr(node, `<${node.name}>`, ancestor.name);
+							w.node_invalid_placement_ssr(node, `\`<${node.name}>\``, ancestor.name);
 						} else {
-							e.node_invalid_placement(node, `<${node.name}>`, ancestor.name);
+							e.node_invalid_placement(node, `\`<${node.name}>\``, ancestor.name);
 						}
 					}
 				} else if (
@@ -830,7 +834,7 @@ const validation = {
 		if (!node.parent) return;
 		if (context.state.parent_element) {
 			if (!is_tag_valid_with_parent('#text', context.state.parent_element)) {
-				e.node_invalid_placement(node, '{expression}', context.state.parent_element);
+				e.node_invalid_placement(node, '`{expression}`', context.state.parent_element);
 			}
 		}
 	}

packages/svelte/src/compiler/warnings.js

@@ -741,13 +741,13 @@ export function event_directive_deprecated(node, name) {
 }
 
 /**
- * %thing% is invalid inside <%parent%>. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning
+ * %thing% is invalid inside `<%parent%>`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning
  * @param {null | NodeLike} node
  * @param {string} thing
  * @param {string} parent
  */
 export function node_invalid_placement_ssr(node, thing, parent) {
-	w(node, "node_invalid_placement_ssr", `${thing} is invalid inside <${parent}>. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a \`hydration_mismatch\` warning`);
+	w(node, "node_invalid_placement_ssr", `${thing} is invalid inside \`<${parent}>\`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a \`hydration_mismatch\` warning`);
 }
 
 /**