Allow prompt setting on code mixin

website/_includes/_mixins.jade

@@ -103,20 +103,20 @@ mixin button(url, trusted, ...style)
     label    - [string] aside title (optional or false for no label)
     language - [string] language for syntax highlighting (default: "python")
                supports basic relevant languages available for PrismJS
-    icon     - [string] icon to display next to code block, mostly used for old/new
+    prompt    - [string] prompt or icon to display next to code block, (mostly used for old/new)
     height   - [integer] optional height to clip code block to
 
-mixin code(label, language, icon, height)
+mixin code(label, language, prompt, height)
     pre.c-code-block.o-block(class="lang-#{(language || DEFAULT_SYNTAX)}" class=icon ? "c-code-block--has-icon" : null style=height ? "height: #{height}px" : null)&attributes(attributes)
         if label
             h4.u-text-label.u-text-label--dark=label
-
+        - var icon = (prompt == 'accept' || prompt == 'reject')
         if icon
             - var classes = {'accept': 'u-color-green', 'reject': 'u-color-red'}
             .c-code-block__icon(class=classes[icon] || null class=classes[icon] ? "c-code-block__icon--border" : null)
                 +icon(icon, 18)
 
-        code.c-code-block__content
+        code.c-code-block__content(data-prompt=icon ? null : prompt)
             block
 
 

website/assets/css/_components/_code.sass

@@ -35,6 +35,13 @@
     font: normal normal 1.1rem/#{2} $font-code
     padding: 1em 2em
 
+    &[data-prompt]:before,
+        content: attr(data-prompt)
+        margin-right: 0.65em
+        display: inline-block
+        vertical-align: middle
+        opacity: 0.5
+
 
 //- Inline code