Repository: hedyorg/hedy

Issue:
Markup code in error box
Sometimes we use code suggestions in code:

print in this example:

![image](https://user-images.githubusercontent.com/1003685/138067206-d3fa4e27-ee70-4878-a899-9f917a617a5e.png)

or plaatsen at random in this one:

![image](https://user-images.githubusercontent.com/1003685/138067143-c7ab93ec-c6fe-4d1f-808a-4ac449e3bc6d.png)

Would be cool if we could make the code stand out more, maybe layout like code blocks in the text with a black background and pink letters?


Discussion:
Something like this?
![image](https://user-images.githubusercontent.com/33595265/138111117-82b52531-9f37-4bf4-ad38-5e7190506ad4.png)

I think that `forwardd` should be in a code block too.
> Something like this? ![image](https://user-images.githubusercontent.com/33595265/138111117-82b52531-9f37-4bf4-ad38-5e7190506ad4.png)

Looks awesome @fRedelaar, that is precisely what I meant!
> I think that `forwardd` should be in a code block too.

Oew that is a very very interesting question Bjorn. On the one hand side yes because it is somehow code... but on the other hand, it is not a valid keyword and making it look like one might also be confusing. I tend to lean towards @fRedelaar's version but I really like your thinking.

Resolving patch:
diff --git a/hedy.py b/hedy.py
--- a/hedy.py
+++ b/hedy.py
@@ -119,9 +119,11 @@ def closest_command(invalid_command, known_commands):
 
     if min_command == invalid_command:
         return None
+    return style_closest_command(min_command)
+ 
 
-    return min_command
-
+def style_closest_command(command):
+    return f'<span class="command-highlighted">{command}</span>'
 
 def closest_command_with_min_distance(command, commands):
     #simple string distance, could be more sophisticated MACHINE LEARNING!


Test patch:
diff --git a/tests/tests_distance_algo.py b/tests/tests_distance_algo.py
--- a/tests/tests_distance_algo.py
+++ b/tests/tests_distance_algo.py
@@ -6,7 +6,7 @@ class TestsHelperFunctions(unittest.TestCase):
   def test_empty_command(self):
     invalid_command = ""
     closest = hedy.closest_command(invalid_command, ['ask', 'print', 'echo'])
-    self.assertEqual('ask', closest)
+    self.assertEqual('<span class="command-highlighted">ask</span>', closest)
 
   def test_self_command_print(self):
     invalid_command = "print"
@@ -26,34 +26,34 @@ def test_self_command_echo(self):
   def test_print_command_1(self):
     invalid_command = "printechoask"
     closest = hedy.closest_command(invalid_command, ['print', 'ask', 'echo'])
-    self.assertEqual("print", closest)
+    self.assertEqual('<span class="command-highlighted">print</span>', closest)
 
   def test_print_command_2(self):
     invalid_command = "printaskecho"
     closest = hedy.closest_command(invalid_command, ['print', 'ask', 'echo'])
-    self.assertEqual("print", closest)
+    self.assertEqual('<span class="command-highlighted">print</span>', closest)
 
   def test_echo_command_1(self):
     invalid_command = "echoprintask"
     closest = hedy.closest_command(invalid_command, ['print', 'ask', 'echo'])
-    self.assertEqual("echo", closest)
+    self.assertEqual('<span class="command-highlighted">echo</span>', closest)
 
   def test_echo_command_2(self):
     invalid_command = "echoprint ask"
     closest = hedy.closest_command(invalid_command, ['print', 'ask', 'echo'])
-    self.assertEqual("echo", closest)
+    self.assertEqual('<span class="command-highlighted">echo</span>', closest)
 
   def test_echo_command_3(self):
     invalid_command = "echo print ask"
     closest = hedy.closest_command(invalid_command, ['ask', 'print', 'echo'])
-    self.assertEqual("echo", closest)
+    self.assertEqual('<span class="command-highlighted">echo</span>', closest)
 
   def test_ask_command_1(self):
     invalid_command = "hello ask echoprint"
     closest = hedy.closest_command(invalid_command, ['ask', 'print', 'echo'])
-    self.assertEqual("ask", closest)
+    self.assertEqual('<span class="command-highlighted">ask</span>', closest)
 
   def test_echo_command_4(self):
     invalid_command = "hello Ask echo0 print"
     closest = hedy.closest_command(invalid_command, ['ask', 'print', 'echo'])
-    self.assertEqual("echo", closest)
+    self.assertEqual('<span class="command-highlighted">echo</span>', closest)
diff --git a/tests/tests_level_04.py b/tests/tests_level_04.py
--- a/tests/tests_level_04.py
+++ b/tests/tests_level_04.py
@@ -293,7 +293,7 @@ def test_pront_should_suggest_print(self):
     with self.assertRaises(hedy.InvalidCommandException) as context:
       result = hedy.transpile(code, self.level)
     self.assertEqual('Invalid', context.exception.error_code)
-    self.assertEqual('print', str(context.exception.arguments['guessed_command']))
+    self.assertEqual('<span class="command-highlighted">print</span>', str(context.exception.arguments['guessed_command']))
   def test_if_with_print_backtick(self):
     code = textwrap.dedent("""\
     name is ask 'ποιό είναι το όνομά σου;'