[FIX] Highlighted commands are shown in errors again (#4468)

**Description**

There's a bug right now in Hedy were the keywords in the errors are not being highlighted:

![image](https://github.com/hedyorg/hedy/assets/45865185/8c6f7794-ba03-4924-9f0e-a3cc44499380)

This is due to a syntax error in `additional.css`. Now is back to normal:

![image](https://github.com/hedyorg/hedy/assets/45865185/0d64663d-5f86-413c-b48d-7f2f047ff682)

static/css/additional.css

@@ -16,7 +16,7 @@
   padding: 0.25rem;
   font-family: monospace;
   border-radius: 0.25rem;
-}}
+}
 
 .command-highlighted {
   background-color: #272822;

templates/incl/editor-and-output.html

@@ -77,7 +77,7 @@
             </div>
             <div>
               <p class="caption font-bold">Oops</p>
-              <p class="details text-sm">An error occurred.</p>
+              <p class="details text-sm" data-cy="error_details">An error occurred.</p>
             </div>
           </div>
         </div>

tests/cypress/e2e/hedy_page/editor_box.cy.js

@@ -26,13 +26,15 @@ describe('Test editor box functionality', () => {
     cy.visit(`${Cypress.env('hedy_page')}#default`);
     // click on textaread to get focus
     cy.get('#editor > .ace_scroller > .ace_content').click();
-    // empty textarea
+    // We wait until the editor is focused
+    // TODO: replace this wait. The editor takes a while to be focused
+    cy.wait(2500);
     cy.focused().clear();
   });
 
   it('Ask modal should hold input and the answer should be shown in output', () => {
     cy.get('#editor').type('print Hello world\nask Hello!\necho');
-    cy.get('#editor > .ace_scroller > .ace_content').should('contain.text', 'print Hello worldask Hello!echo');
+    cy.get('#editor > .ace_scroller > .ace_content').should('have.text', 'print Hello worldask Hello!echo');
     cy.get('#runit').click();
     cy.get('#output').should('contain.text', 'Hello world');
     cy.get('#ask-modal').should('be.visible');
@@ -45,20 +47,45 @@ describe('Test editor box functionality', () => {
     // First we write and run the program and leave the ask modal unanswered
     cy.get('#editor').type('print Hello world\nask Hello!');
     // the \n is not shown as a charecter when you get the text
-    cy.get('#editor > .ace_scroller > .ace_content').should('contain.text', 'print Hello worldask Hello!');
+    cy.get('#editor > .ace_scroller > .ace_content').should('have.text', 'print Hello worldask Hello!');
     cy.get('#runit').click();
     cy.get('#output').should('contain.text', 'Hello world');
     cy.get('#ask-modal').should('be.visible');
 
     // Now we edit the program and the ask modal should be hidden
     cy.get('#editor > .ace_scroller > .ace_content').click();
-    cy.focused().clear();
+    // TODO: replace this wait. The editor takes a while to be focused
+    cy.wait(500)
+    cy.focused().clear();      
     cy.get('#editor').type('print Hello world\nask Hello!');
+    cy.get('#editor > .ace_scroller > .ace_content').should('have.text', 'print Hello worldask Hello!');      
     cy.get('#ask-modal').should('not.be.visible');
 
     // Running program again and it should show the modal
     cy.get('#runit').click();
     cy.get('#output').should('contain.text', 'Hello world');
     cy.get('#ask-modal').should('be.visible');
   });
+
+  it ('When making an error the error modal should be shown', () => {
+    cy.get('#editor').type('echo');
+    cy.get('#editor > .ace_scroller > .ace_content').should('have.text', 'echo');
+    cy.get('#runit').click();
+
+    cy.get('#errorbox').should('be.visible');
+    // The error should be about the lonely echo
+    cy.getBySel('error_details').should('contain.text', 'echo');
+  });
+
+  it ('When making an error the keywords must be highligted', () => {
+    cy.get('#editor').type('prin Hello world');
+    cy.get('#editor > .ace_scroller > .ace_content').should('have.text', 'prin Hello world');
+    cy.get('#runit').click();
+
+    cy.get('#errorbox').should('be.visible');
+    // The error should be about the lonely echo
+    cy.getBySel('error_details').should('contain.text', 'prin');
+    cy.get('[data-cy="error_details"] span').should('have.class', 'command-highlighted');
+
+  });
 });