✨ Adding sytnax highlighting for horizontal parsons

Author: zihan21206

runestone/hparsons/css/hljs-xcode.css

@@ -46,7 +46,8 @@ def setup(app):
 TEMPLATE_END = """
 </div>
 <div class='hparsons'></div>
-<textarea data-lang="%(language)s" 
+<textarea
+    %(language)s
     %(optional)s
     %(dburl)s
     %(reuse)s
@@ -131,6 +132,11 @@ def run(self):
 
         env = self.state.document.settings.env
 
+        if "language" in self.options:
+            self.options["language"] = "data-language='{}'".format(self.options["language"])
+        else:
+            self.options["language"] = ""
+
         if "reuse" in self.options:
             self.options['reuse'] = ' data-reuse="true"'
         else:
@@ -161,10 +167,6 @@ def run(self):
 
         self.options["initialsetting"] = source
 
-        # TODO: change this
-        if "language" not in self.options:
-            self.options["language"] = "python"
-
         # SQL Options
         if "dburl" in self.options:
             self.options["dburl"] = "data-dburl='{}'".format(self.options["dburl"])

runestone/hparsons/hparsons.py

@@ -24,7 +24,7 @@ export default class BlockFeedback extends HParsonsFeedback {
         }
         this.solution = solutionBlocks;
         this.grader.solution = solutionBlocks;
-        this.answerArea = this.hparsons.hparsonsInput.shadowRoot.querySelector('.drop-area');
+        this.answerArea = this.hparsons.hparsonsInput.querySelector('.drop-area');
     }
 
     // Called when check button clicked (block-based Feedback)