feat(curriculum): Add interactive examples to code element lesson (#62703)

curriculum/challenges/english/blocks/lecture-working-with-specialized-semantic-elements/6729960ed6e2ca3825940e97.md

@@ -5,12 +5,14 @@ challengeType: 19
 dashedName: how-do-you-represent-computer-code-in-html
 ---
 
-# --description--
+# --interactive--
 
 The inline code element is used to represent short snippets of code inside text. Common use cases for the code element would be for technical articles and documentation pages.
 
 Here is an example of using the `code` element to show a CSS code snippet:
 
+:::interactive_editor
+
 ```html
 <p>
   To set the text color to blue in CSS, use the following code:
@@ -18,6 +20,8 @@ Here is an example of using the `code` element to show a CSS code snippet:
 </p>
 ```
 
+:::
+
 In this example, the CSS `color` property is used to set the text color to `blue`. By wrapping this code snippet inside `<code>` tags, it communicates to the browser that the text is a piece of inline code.
 
 The browser will apply default styles for content inside of the `code` element. The default styling is a monospaced font.
@@ -26,6 +30,8 @@ The `code` element is meant to represent a single line of code. If you want to r
 
 The preformatted text element is used to represent preformatted text. Here is an example of using the preformatted text element to show a CSS declaration:
 
+:::interactive_editor
+
 ```html
 <pre>
   <code>
@@ -36,6 +42,8 @@ The preformatted text element is used to represent preformatted text. Here is an
 </pre>
 ```
 
+:::
+
 When using the `pre` element, you will need to be mindful of spacing because it will display exactly as written inside the HTML document.
 
 In the browser, you will see that the code is indented several spaces to the right. If you were to change the indentation in the code example, then you will see a difference in indentation on the screen.