HTML from Markdown

[Ken]

I tested if we can use Markdown syntax in Spiderbasic and it turn out we actually can.
I am using here free GitHub markdown Api to convert Markdown to HTML in Spiderbasic.

Markdown with Gadget

Code: Select all

EnableExplicit

; ============================================
; CONVERT MARKDOWN VIA GITHUB API
; ============================================

Procedure ConvertMarkdown()
  ! var markdown = '### Hello SpiderBasic!\n\nThis is **bold** and *italic*.\n\n| Month | Amount |\n| ----- | ------ |\n| January | 100 |\n| February | 90 |';
  ! 
  ! fetch('https://api.github.com/markdown', {
  !   method: 'POST',
  !   headers: {
  !     'Accept': 'application/vnd.github+json',
  !     'Content-Type': 'application/json',
  !     'X-GitHub-Api-Version': '2022-11-28'
  !   },
  !   body: JSON.stringify({
  !     text: markdown,
  !     mode: 'markdown'
  !   })
  ! })
  ! .then(response => response.text())
  ! .then(html => {
  !   console.log('HTML received');
  !   document.getElementById('output').innerHTML = html;
  ! })
  ! .catch(error => {
  !   console.log('Error:', error);
  !   document.getElementById('output').innerHTML = '<p style="color:red;">Error: ' + error.message + '</p>';
  ! });
EndProcedure

; ============================================
; MAIN
; ============================================

Define Html.s
Define Style.s
Define q.s = Chr(34)

If OpenWindow(0, 100, 100, 500, 400, "GitHub Markdown API Demo", #PB_Window_SystemMenu)
  
  ButtonGadget(1, 10, 10, 180, 30, "Convert Markdown")
  BindGadgetEvent(1, @ConvertMarkdown(), #PB_EventType_LeftClick)
  
  ; CSS styles for table
  Style = "<style>table{border-collapse:collapse;width:100%;margin:10px 0;}th,td{border:1px solid #ccc;padding:8px;text-align:left;}th{background:#4a90d9;color:white;}tr:nth-child(even){background:#f9f9f9;}</style>"
  
  ; Create output div with styles
  Html = Style + "<div id=" + q + "output" + q + " style=" + q + "padding:10px;" + q + ">Click button to convert Markdown...</div>"
  TextGadget(2, 10, 50, 480, 340, Html)
  
EndIf

Markdown with MobileUI

Code: Select all

EnableExplicit

Enumeration
  #ConvertButton
EndEnumeration

; ============================================
; EVENT HANDLER
; ============================================

Procedure MobileEvents()
  Select EventMobile()
    Case #ConvertButton
      ; Call the convert function
      ! f_convertmarkdown();
  EndSelect
EndProcedure

; ============================================
; CONVERT MARKDOWN VIA GITHUB API
; ============================================

Procedure ConvertMarkdown()
  ! var markdown = '### Hello SpiderBasic!\n\nThis is **bold** and *italic*.\n\n| Month | Amount |\n| ----- | ------ |\n| January | 100 |\n| February | 90 |';
  ! 
  ! fetch('https://api.github.com/markdown', {
  !   method: 'POST',
  !   headers: {
  !     'Accept': 'application/vnd.github+json',
  !     'Content-Type': 'application/json',
  !     'X-GitHub-Api-Version': '2022-11-28'
  !   },
  !   body: JSON.stringify({
  !     text: markdown,
  !     mode: 'markdown'
  !   })
  ! })
  ! .then(response => response.text())
  ! .then(html => {
  !   console.log('HTML received');
  !   document.getElementById('output').innerHTML = html;
  ! })
  ! .catch(error => {
  !   console.log('Error:', error);
  !   document.getElementById('output').innerHTML = '<p style="color:red;">Error: ' + error.message + '</p>';
  ! });
EndProcedure

; ============================================
; MAIN
; ============================================

Define Html.s

If ContainerMobile(#PB_Any, #PB_Mobile_Page)
  
  ; Toolbar
  If ToolBarMobile(#PB_Any)
    TextMobile(#PB_Any, "GitHub Markdown API", #PB_Mobile_Center)
    CloseMobileContainer()
  EndIf
  
  ; Convert Button
  If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:10px")
    ButtonMobile(#ConvertButton, "Convert Markdown", #PB_Mobile_Center)
    CloseMobileContainer()
  EndIf
  
  ; CSS styles + output div
  Html = "<style>" + 
         "table { border-collapse: collapse; width: 100%; margin: 10px 0; }" + 
         "th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }" + 
         "th { background-color: #4a90d9; color: white; }" + 
         "tr:nth-child(even) { background-color: #f9f9f9; }" + 
         "#output { padding: 15px; }" + 
         "</style>" + 
         "<div id=" + Chr(34) + "output" + Chr(34) + ">Click button to convert Markdown...</div>"
  
  HtmlMobile(Html)
  
  CloseMobileContainer()
  
EndIf

BindEvent(#PB_Event_Mobile, @MobileEvents())