Using ACE to add syntax highlighting to code documentation.

app/lib/aether_utils.coffee

@@ -51,3 +51,4 @@ functionParameters =
   initializeCentroids: []
   update: []
   getNearestEnemy: []
+  die: []

app/styles/play/level/tome/spell_palette_entry.sass

@@ -49,11 +49,15 @@
 body:not(.dialogue-view-active)
   .spell-palette-popover.popover
     right: 45%
-    min-width: 350px
+    min-width: 500px
 
 .spell-palette-popover.popover
   // Only those popovers which are our direct children (spell documentation)
   max-width: 600px
+  padding: 0
+  border-image: url(/images/level/popover_background.png) 29 39 fill stretch
+  border-width: 15px 20px
+  @include box-shadow(0 0 0 #000)
 
   // Jiggle animation
   // TODO: consolidate with problem_alert.sass jiggle
@@ -98,13 +102,8 @@ body:not(.dialogue-view-active)
       &:hover
         @include opacity(1)
 
-  padding: 0
-  border-image: url(/images/level/popover_background.png) 29 39 fill stretch
-  border-width: 15px 20px
-  @include box-shadow(0 0 0 #000)
-
   h1:not(.not-code), h2:not(.not-code), h3:not(.not-code), h4:not(.not-code), h5:not(.not-code), h6:not(.not-code)
-    font-family: Menlo, Monaco, Consolas, "Courier New", monospace
+    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, "source-code-pro", monospace !important
     font-variant: normal
 
   .popover-title
@@ -129,6 +128,24 @@ body:not(.dialogue-view-active)
   &.right .arrow
     left: -3%
 
+  .docs-ace-container
+    padding: 2px 4px
+    border-radius: 4px
+
+    &, .docs-ace
+      background-color: #f9f2f4
+      font-size: 12px
+      font-family: Monaco, Menlo, Ubuntu Mono, Consolas, "source-code-pro", monospace !important
+
+    .docs-ace
+      .ace_cursor, .ace_bracket
+        display: none
+
+  code
+    color: black
+    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, "source-code-pro", monospace !important
+    font-size: 12px
+
 html.no-borderimage
   .spell-palette-popover.popover
     background: transparent url(/images/level/popover_background.png)

app/templates/play/level/tome/spell_palette_entry_popover.jade

@@ -62,25 +62,28 @@ if !selectedMethod
       strong
         span(data-i18n="skill_docs.example") Example
         | :
-      div!= marked("```\n" + doc.example + "```")
+      .docs-ace-container
+        .docs-ace= doc.example
   else if doc.type == 'function' && argumentExamples.length
     p.example
       strong
         span(data-i18n="skill_docs.example") Example
         | :
       div
-        if language == 'javascript'
-          code= doc.owner + '.' + doc.name + '(' + argumentExamples.join(', ') + ');'
-        else if language == 'coffeescript'
-          code= doc.ownerName + (doc.ownerName == '@' ? '' : '.') + doc.name + ' ' + argumentExamples.join(', ')
-        else if language == 'python'
-          code= doc.ownerName + '.' + doc.name + '(' + argumentExamples.join(', ') + ')'
-        else if language == 'clojure'
-          code= '(.' + doc.name + ' ' + doc.ownerName + ' ' + argumentExamples.join(', ') + ')'
-        else if language == 'lua'
-          code= doc.ownerName + ':' + doc.name + '(' + argumentExamples.join(', ') + ')'
-        else if language == 'io'
-          code= (doc.ownerName == 'this' ? '' : doc.ownerName + ' ') + doc.name + '(' + argumentExamples.join(', ') + ')'
+        .docs-ace-container
+          .docs-ace
+            if language == 'javascript'
+              span= doc.owner + '.' + doc.name + '(' + argumentExamples.join(', ') + ');'
+            else if language == 'coffeescript'
+              span= doc.ownerName + (doc.ownerName == '@' ? '' : '.') + doc.name + ' ' + argumentExamples.join(', ')
+            else if language == 'python'
+              span= doc.ownerName + '.' + doc.name + '(' + argumentExamples.join(', ') + ')'
+            else if language == 'clojure'
+              span= '(.' + doc.name + ' ' + doc.ownerName + ' ' + argumentExamples.join(', ') + ')'
+            else if language == 'lua'
+              span= doc.ownerName + ':' + doc.name + '(' + argumentExamples.join(', ') + ')'
+            else if language == 'io'
+              span= (doc.ownerName == 'this' ? '' : doc.ownerName + ' ') + doc.name + '(' + argumentExamples.join(', ') + ')'
 
 if (doc.type != 'function' && doc.type != 'snippet') || doc.name == 'now'
   p.value

app/views/play/level/tome/SpellPaletteEntryView.coffee

@@ -3,6 +3,7 @@ template = require 'templates/play/level/tome/spell_palette_entry'
 {me} = require 'lib/auth'
 filters = require 'lib/image_filter'
 DocFormatter = require './DocFormatter'
+SpellView = require 'views/play/level/tome/SpellView'
 
 module.exports = class SpellPaletteEntryView extends CocoView
   tagName: 'div'  # Could also try <code> instead of <div>, but would need to adjust colors
@@ -28,6 +29,7 @@ module.exports = class SpellPaletteEntryView extends CocoView
     @docFormatter = new DocFormatter options
     @doc = @docFormatter.doc
     @doc.initialHTML = @docFormatter.formatPopover()
+    @aceEditors = []
 
   getRenderData: ->
     c = super()
@@ -52,6 +54,31 @@ module.exports = class SpellPaletteEntryView extends CocoView
       Backbone.Mediator.publish 'audio-player:play-sound', trigger: "spell-palette-entry-open-#{soundIndex}", volume: 0.75
       popover = @$el.data('bs.popover')
       popover?.$tip?.i18n()
+      codeLanguage = @options.language
+      oldEditor.destroy() for oldEditor in @aceEditors
+      @aceEditors = []
+      aceEditors = @aceEditors
+      popover?.$tip?.find('.docs-ace').each ->
+        contents = $(@).text()
+        editor = ace.edit @
+        editor.setOptions maxLines: Infinity
+        editor.setReadOnly true
+        editor.setTheme 'ace/theme/textmate'
+        editor.setShowPrintMargin false
+        editor.setShowFoldWidgets false
+        editor.setHighlightActiveLine false
+        editor.setHighlightActiveLine false
+        editor.setBehavioursEnabled false
+        editor.renderer.setShowGutter false
+        editor.setValue contents
+        editor.clearSelection()
+        session = editor.getSession()
+        session.setUseWorker false
+        session.setMode SpellView.editModes[codeLanguage]
+        session.setWrapLimitRange null
+        session.setUseWrapMode true
+        session.setNewLineMode 'unix'
+        aceEditors.push editor
 
   onMouseEnter: (e) ->
     # Make sure the doc has the updated Thang so it can regenerate its prop value
@@ -121,4 +148,5 @@ module.exports = class SpellPaletteEntryView extends CocoView
     @togglePinned() if @popoverPinned
     @$el.popover 'destroy'
     @$el.off()
+    oldEditor.destroy() for oldEditor in @aceEditors
     super()

app/views/play/level/tome/SpellView.coffee

@@ -20,7 +20,7 @@ module.exports = class SpellView extends CocoView
   eventsSuppressed: true
   writable: true
 
-  editModes:
+  @editModes:
     'javascript': 'ace/mode/javascript'
     'coffeescript': 'ace/mode/coffee'
     'python': 'ace/mode/python'
@@ -91,7 +91,7 @@ module.exports = class SpellView extends CocoView
     @aceSession = @ace.getSession()
     @aceDoc = @aceSession.getDocument()
     @aceSession.setUseWorker false
-    @aceSession.setMode @editModes[@spell.language]
+    @aceSession.setMode SpellView.editModes[@spell.language]
     @aceSession.setWrapLimitRange null
     @aceSession.setUseWrapMode true
     @aceSession.setNewLineMode 'unix'
@@ -324,7 +324,7 @@ module.exports = class SpellView extends CocoView
 
     # window.zatannaInstance = @zatanna
     # window.snippetEntries = snippetEntries
-    lang = @editModes[e.language].substr 'ace/mode/'.length
+    lang = SpellView.editModes[e.language].substr 'ace/mode/'.length
     @zatanna.addSnippets snippetEntries, lang
 
   onMultiplayerChanged: ->
@@ -904,8 +904,8 @@ module.exports = class SpellView extends CocoView
 
   onChangeLanguage: (e) ->
     return unless @spell.canWrite()
-    @aceSession.setMode @editModes[e.language]
-    @zatanna?.set 'language', @editModes[e.language].substr('ace/mode/')
+    @aceSession.setMode SpellView.editModes[e.language]
+    @zatanna?.set 'language', SpellView.editModes[e.language].substr('ace/mode/')
     wasDefault = @getSource() is @spell.originalSource
     @spell.setLanguage e.language
     @reloadCode true if wasDefault