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())

[Ken]

Here is little more complex example. The simplicity of Markdown code is obvious compared to HTML.

Code: Select all

EnableExplicit

; ============================================
; WINDOW RESIZE HANDLER
; ============================================

Procedure ResizeHandler()
  Define w.i, h.i
  w = WindowWidth(0) - 20
  h = WindowHeight(0) - 100
  If h < 100
    h = 100
  EndIf
  ResizeGadget(2, 10, 80, w, h)
  ; Update output div height via JavaScript
  ! document.getElementById('output').style.maxHeight = (v_h - 10) + 'px';
EndProcedure

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

Procedure ConvertMarkdown()
  ! var markdown = `# SpiderBasic Documentation
  ! 
  ! ## Introduction
  ! 
  ! **SpiderBasic** is a powerful tool for creating *web applications* using BASIC syntax.
  ! 
  ! ### Features
  ! 
  ! - Cross-platform development
  ! - Native mobile support (iOS & Android)
  ! - Easy JavaScript integration
  ! - Rich UI components
  ! 
  ! ## Code Example
  ! 
  ! Here is a simple \`Hello World\` example:
  ! 
  ! \`\`\`basic
  ! Debug "Hello World!"
  ! MessageRequester("Title", "Hello SpiderBasic!")
  ! \`\`\`
  ! 
  ! ## Data Table
  ! 
  ! | Feature | Gadget | MobileUI |
  ! | ------- | ------ | -------- |
  ! | Window | OpenWindow() | ContainerMobile() |
  ! | Button | ButtonGadget() | ButtonMobile() |
  ! | Events | BindGadgetEvent() | BindEvent() |
  ! | HTML | TextGadget() | HtmlMobile() |
  ! 
  ! ## Pricing Plans (Not Real)
  ! 
  ! | Plan | Users | Storage | Price |
  ! | ---- | ----- | ------- | ----- |
  ! | Free | 1 | 5 GB | $0 |
  ! | Pro | 10 | 100 GB | $29/mo |
  ! | Enterprise | Unlimited | 1 TB | $99/mo |
  ! 
  ! > **Note:** All plans include free updates and community support.
  ! 
  ! ## Useful Links
  ! 
  ! 1. [SpiderBasic Website](https://www.spiderbasic.com)
  ! 2. [Documentation](https://www.spiderbasic.com/documentation)
  ! 3. [Forum](https://www.spiderbasic.com/forum)
  ! 
  ! ---
  ! 
  ! *Last updated: 2025*
  ! `;
  ! 
  ! 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 => {
  !   document.getElementById('output').innerHTML = html;
  ! })
  ! .catch(error => {
  !   document.getElementById('output').innerHTML = '<p style="color:red;">Error: ' + error.message + '</p>';
  ! });
EndProcedure

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

Define Html.s

Html = "<style>table{border-collapse:collapse;width:100%;margin:10px 0;}th,td{border:1px solid #ddd;padding:8px;}th{background:#3498db;color:white;}tr:nth-child(even){background:#f8f9fa;}blockquote{border-left:4px solid #3498db;padding:10px;background:#f0f7fc;}pre{background:#2d2d2d;color:#f8f8f2;padding:15px;border-radius:8px;overflow-x:auto;}code{background:#f4f4f4;padding:2px 6px;border-radius:4px;}pre code{background:none;color:inherit;}a{color:#3498db;}h1{border-bottom:2px solid #3498db;padding-bottom:10px;}#output{padding:15px;overflow-y:auto;max-height:450px;}</style>" + 
       "<div id=" + Chr(34) + "output" + Chr(34) + ">Click button to convert Markdown...</div>"

If OpenWindow(0, 50, 50, 700, 550, "GitHub Markdown API - Resizable", #PB_Window_SystemMenu | #PB_Window_SizeGadget)
  
  ButtonGadget(1, 10, 35, 180, 35, "Convert Markdown")
  BindGadgetEvent(1, @ConvertMarkdown(), #PB_EventType_LeftClick)
  
  TextGadget(2, 10, 80, 680, 460, Html)
  
  BindEvent(#PB_Event_SizeWindow, @ResizeHandler())
  
EndIf