add inline code block support

data/static/style.css

@@ -120,6 +120,16 @@ pre code {
   padding: 20px;
 }
 
+.inline-code {
+  background-color: rgb(38.5714173228, 40.9237007874, 35.6762992126);
+  color: white;
+  padding: 5px 10px;
+  display: inline-block;
+  margin: 4px;
+  border-radius: 4px;
+  font-size: 1rem;
+}
+
 .copy-code-container {
   position: sticky;
   width: calc(100% - 4px);

lib/babycode.lua

@@ -8,12 +8,19 @@ function babycode.to_html(s, escape_html)
   -- extract code blocks first and store them as placeholders
   -- don't want to process bbcode embedded into a code block
   local code_blocks = {}
+  local inline_codes = {}
   s = escape_html(s)
   local text = s:gsub("%[code%](.-)%[/code%]", function(code)
-    -- strip leading and trailing newlines, preserve others
-    local m, _ = code:gsub("^%s*(.-)%s*$", "%1")
-    table.insert(code_blocks, m)
-    return "\1CODE:"..#code_blocks.."\1"
+    local is_inline = code:match("\n") == nil
+    if is_inline then
+      table.insert(inline_codes, code)
+      return "\1ICODE:"..#inline_codes.."\1"
+    else
+      -- strip leading and trailing newlines, preserve others
+      local m, _ = code:gsub("^%s*(.-)%s*$", "%1")
+      table.insert(code_blocks, m)
+      return "\1CODE:"..#code_blocks.."\1"
+    end
   end)
 
   -- replace `[url=https://example.com]Example[/url] tags
@@ -51,6 +58,11 @@ function babycode.to_html(s, escape_html)
     local button = ("<button type=button class=\"copy-code\" value=\"%s\">Copy</button>"):format(code)
     return "<pre><span class=\"copy-code-container\">" .. button .. "</span><code>"..code.."</code></pre>"
   end)
+  
+  text = text:gsub("\1ICODE:(%d+)\1", function (n)
+    local code = inline_codes[tonumber(n)]
+    return "<code class=\"inline-code\">" .. code .. "</code>"
+  end)
 
   return text
 end

sass/style.scss

@@ -156,6 +156,16 @@ pre code {
   padding: 20px;
 }
 
+.inline-code {
+  background-color: $verydark;
+  color: white;
+  padding: 5px 10px;
+  display: inline-block;
+  margin: 4px;
+  border-radius: 4px;
+  font-size: 1rem;
+}
+
 .copy-code-container {
   position: sticky;
   // width: 100%;

views/common/bbcode_help.etlua

@@ -6,6 +6,16 @@
     <li>[s]<del>strikethrough</del>[/s]</li>
     <li>[url=https://example.com]<a href="https://example.com">labeled URL</a>[/url]</li>
     <li>[url]<a href="https://unlabeled-url.example.com">https://unlabeled-url.example.com</a>[/url]</li>
-    <li>[code]<code>code block</code>[/code]</li>
+    <li>
+      [code]with<br>line breaks[/code] will produce a code block:
+      <details>
+        <summary>Show code block example</summary>
+        <pre><span class="copy-code-container"><button type=button class="copy-code" value="with
+line breaks">Copy</button></span><code>with
+line breaks</code></pre>
+      </details>
+    </li>
+    <li>[code]<code class="inline-code">with no line breaks</code>[/code]</li>
+    <li><code class="inline-code">---</code> will create a horizontal rule for separating content</li>
   </ul>
 </details>