Support embed OSM

Signed-off-by: Yukai Huang <yukaihuangtw@gmail.com>

Author: Yukaii

public/css/extra.css

@@ -79,6 +79,10 @@
     width: 100%;
     height: 100%;
 }
+.geo-map {
+  width: 100%;
+  height: 250px;
+}
 
 .MJX_Assistive_MathML {
     display: none;

public/css/markdown.css

@@ -127,6 +127,7 @@
 .markdown-body pre.graphviz,
 .markdown-body pre.mermaid,
 .markdown-body pre.abc,
+.markdown-body pre.geo,
 .markdown-body pre.vega {
     text-align: center;
     background-color: inherit;

public/css/slide.css

@@ -224,6 +224,7 @@ pre.sequence-diagram,
 pre.graphviz,
 pre.mermaid,
 pre.abc,
+pre.geo,
 pre.vega {
     text-align: center;
     background-color: white;

public/js/extra.js

@@ -1,5 +1,5 @@
 /* eslint-env browser, jquery */
-/* global moment, serverurl, plantumlServer */
+/* global moment, serverurl, plantumlServer, L */
 
 import Prism from 'prismjs'
 import hljs from 'highlight.js'
@@ -453,6 +453,31 @@ export function finishView (view) {
       console.warn(err)
     }
   })
+  view.find('div.geo.raw').removeClass('raw').each(function (key, value) {
+    const $elem = $(value).parent().parent()
+    const $value = $(value)
+    const content = $value.text()
+    try {
+      if (content.match(/[\d\.\,]+/)) {
+        const [lng, lat, zoom] = content.split(',').map(parseFloat)
+        const position = [lat, lng]
+        $elem.html(`<div class="geo-map"></div>`)
+        const map = L.map($elem.find('.geo-map')[0]).setView(position, zoom || 16)
+
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+          attribution: '<a href="https://www.openstreetmap.org/">OSM</a>',
+          maxZoom: 18,
+        }).addTo(map)
+        L.marker(position).addTo(map)
+        $elem.addClass('geo')
+      }
+    } catch (err) {
+      $elem.append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
+      console.warn(err)
+    }
+  })
+
+
   // image href new window(emoji not included)
   const images = view.find('img.raw[src]').removeClass('raw')
   images.each((key, value) => {
@@ -1013,6 +1038,8 @@ function highlightRender (code, lang) {
     return `<div class="abc raw">${code}</div>`
   } else if (lang === 'vega') {
     return `<div class="vega raw">${code}</div>`
+  } else if (lang === 'geo') {
+    return `<div class="geo raw">${code}</div>`
   }
   const result = {
     value: code

public/js/index.js

@@ -101,7 +101,7 @@ var cursorActivityDebounce = 50
 var cursorAnimatePeriod = 100
 var supportContainers = ['success', 'info', 'warning', 'danger', 'spoiler']
 var supportCodeModes = ['javascript', 'typescript', 'jsx', 'htmlmixed', 'htmlembedded', 'css', 'xml', 'clike', 'clojure', 'ruby', 'python', 'shell', 'php', 'sql', 'haskell', 'coffeescript', 'yaml', 'pug', 'lua', 'cmake', 'nginx', 'perl', 'sass', 'r', 'dockerfile', 'tiddlywiki', 'mediawiki', 'go', 'gherkin'].concat(hljs.listLanguages())
-var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml', 'vega']
+var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml', 'vega', 'geo']
 var supportHeaders = [
   {
     text: '# h1',