Skip to main content
SimilarExport ZIP
100%

Markdown Demo

✓ Published0🌍 Public
CCurran Kelleher
Last edited Mar 9, 2022
Created on Mar 9, 2022
Forked from HTML Starter

This example showcases the rendering of Markdown content in VizHub, demonstrating a wide range of syntax including headings, emphasis, links, tables, code blocks, blockquotes, task lists, and embedded HTML. The README.md file serves as the Markdown source, while the visualization includes an index.html that displays a large "Hello HTML!" message styled with CSS. The example highlights how VizHub processes Markdown and HTML files, using standard Markdown parsing and HTML rendering to present the content in the gallery. It does not use any additional JavaScript libraries for data visualization.

AI-generated description

An example showing the various ways Markdown is rendered in VizHub.

Based on https://github.com/tchapi/markdown-cheatsheet/blob/master/README.md

Markdown Cheatsheet<a name="TOP"></a>

Heading 1

Markup :  # Heading 1 #

-OR-

Markup :  ============= (below H1 text)

Heading 2

Markup :  ## Heading 2 ##

-OR-

Markup: --------------- (below H2 text)

Heading 3

Markup :  ### Heading 3 ###

Heading 4

Markup :  #### Heading 4 ####

Common text

Markup :  Common text

Emphasized text

Markup :  _Emphasized text_ or *Emphasized text*

Strikethrough text

Markup :  ~~Strikethrough text~~

Strong text

Markup :  __Strong text__ or **Strong text**

Strong emphasized text

Markup :  ___Strong emphasized text___ or ***Strong emphasized text***

Named Link and http://www.google.fr/ or http://example.com/

Markup :  [Named Link](http://www.google.fr/ "Named link title") and http://www.google.fr/ or <https://example.com/>

heading-1

Markup: [heading-1](#heading-1 "Goto heading-1")

Table, like this one :

First Header Second Header
Content Cell Content Cell
Content Cell Content Cell 
First Header  | Second Header
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell

Adding a pipe | in a cell :

First Header Second Header
Content Cell Content Cell
Content Cell | 
First Header  | Second Header
------------- | -------------
Content Cell  | Content Cell
Content Cell  |  \|

Left, right and center aligned table

Left aligned Header Right aligned Header Center aligned Header
Content Cell Content Cell Content Cell
Content Cell Content Cell Content Cell 
Left aligned Header | Right aligned Header | Center aligned Header
| :--- | ---: | :---:
Content Cell  | Content Cell | Content Cell
Content Cell  | Content Cell | Content Cell

code()

Markup :  `code()`

    var specificLanguage_code = 
    {
        "data": {
            "lookedUpPlatform": 1,
            "query": "Kasabian+Test+Transmission",
            "lookedUpItem": {
                "name": "Test Transmission",
                "artist": "Kasabian",
                "album": "Kasabian",
                "picture": null,
                "link": "http://open.spotify.com/track/5jhJur5n4fasblLSCOcrTp"
            }
        }
    }

Markup : ```javascript
         ```
  • Bullet list
    • Nested bullet
      • Sub-nested bullet etc
  • Bullet list item 2
 Markup : * Bullet list
              * Nested bullet
                  * Sub-nested bullet etc
          * Bullet list item 2

-OR-

 Markup : - Bullet list
              - Nested bullet
                  - Sub-nested bullet etc
          - Bullet list item 2
  1. A numbered list
    1. A nested numbered list
    2. Which is numbered
  2. Which is numbered
 Markup : 1. A numbered list
              1. A nested numbered list
              2. Which is numbered
          2. Which is numbered
  • An uncompleted task
  • A completed task
 Markup : - [ ] An uncompleted task
          - [x] A completed task
  • An uncompleted task
    • A subtask
 Markup : - [ ] An uncompleted task
              - [ ] A subtask

Blockquote

Nested blockquote

Markup :  > Blockquote
          >> Nested Blockquote

Horizontal line :

Markup :  - - - -

Image with alt :

picture alt

Markup : ![picture alt](http://via.placeholder.com/200x150 "Title is optional")

Foldable text:

<details> <summary>Title 1</summary> <p>Content 1 Content 1 Content 1 Content 1 Content 1</p> </details> <details> <summary>Title 2</summary> <p>Content 2 Content 2 Content 2 Content 2 Content 2</p> </details> 
Markup : <details>
           <summary>Title 1</summary>
           <p>Content 1 Content 1 Content 1 Content 1 Content 1</p>
         </details>

<h3>HTML</h3>
<p> Some HTML code here </p>

Link to a specific part of the page:

Go To TOP

Markup : [text goes here](#section_name)
          section_title<a name="section_name"></a>

Hotkey:

<kbd>⌘F</kbd>

<kbd>⇧⌘F</kbd>

Markup : <kbd>⌘F</kbd>

Hotkey list:

Key Symbol
Option ⌥
Control ⌃
Command ⌘
Shift ⇧
Caps Lock ⇪
Tab ⇥
Esc ⎋
Power ⌽
Return ↩
Delete ⌫
Up ↑
Down ↓
Left ←
Right →

Emoji:

:exclamation: Use emoji icons to enhance text. :+1: Look up emoji codes at emoji-cheat-sheet.com

Markup : Code appears between colons :EMOJICODE:
MIT Licensed

Similar vizzes

Loading thumbnail…

Markdown Cheatsheet

This example displays the raw content of a Markdown cheatsheet, which is a plain-text file listing markup syntax for headings, emphasis, links, tables, code blocks, lists, and more. The page also includes an inline HTML fragment and a JavaScript console log. The visualization is not driven by data or charting libraries; instead, it relies solely on the browser’s default rendering of the README file and the index.html body, with the latter styled via a simple CSS rule.

CCurran Kelleher
76% match
Loading thumbnail…

Fork of MrW's VizHub Docu

This example documents the keyboard shortcuts available in the VizHub editor, presenting them in a Markdown table within the README. The visualization itself is a minimal HTML page that displays only the title and the word "README" with large, centered typography. The code relies on standard HTML and CSS for styling, while the documentation references CodeMirror and VIM key bindings, including commands like toggling comments and killing lines. It does not use any data visualization libraries, instead serving as a static reference chart.

GGodzillaJim
75% match
Loading thumbnail…

Hello VizHub

This example demonstrates a minimalist text-rendering setup where the message “Hello VizHub!” appears on the page. It uses a simple HTML structure with a dedicated `<div>` for the message, styled via CSS to center the text at a large 12em font size. The visualization relies on D3.js v5, loaded from a CDN, though no data or complex rendering is applied. The JavaScript code imports the message from a separate ES6 module, highlighting how VizHub supports modular file organization and external library integration for straightforward web-based visualizations.

Aadlankj
73% match
Loading thumbnail…

vizHub

This example renders a nearly blank HTML page with centered text, displaying the title "vizHub" at a massive font size. It demonstrates a minimal setup using plain CSS for styling and JavaScript for browser interaction, logging the string "cool" to the developer console upon load. The page relies solely on the Document Object Model and standard web APIs, with no external libraries or data sources involved. It serves as a bare-bones starter template for embedding custom visualizations in a React framework context.

Sstanemurhula
72% match
Loading thumbnail…

Hello VizHub

This example demonstrates VizHub’s ability to render a simple, text-based visualization using a modular ES6 structure. It shows a static message, “Hello VizHub!”, displayed prominently on a dark blue background with large, centered Ubuntu font styling. The code loads D3 v5 from a CDN, although the active script comments out the `select` import and instead relies on `bundle.js` to wire up the page. Styling comes from an external `styles.css` file, and the example illustrates how HTML, CSS, and JavaScript modules can be organized within a project.

YYash Modi
71% match
Loading thumbnail…

Hello VizHub

This example displays a simple text message, "Hello VizHub!", centered on a dark blue background with large, light-colored Ubuntu font. It demonstrates the basic structure of a VizHub project, using an HTML file to load D3.js and a stylesheet, while importing and rendering content from a separate ES6 module. The visualization uses D3's `select` function to target a specific DOM element and set its text content, highlighting how to combine modular JavaScript with external styling.

JJesmaaar
71% match
Loading thumbnail…

Hello VizHub

This example displays a simple text message, "Hello VizHub!", centered on a dark blue background with large, light-colored Ubuntu font. It demonstrates the basic structure of a VizHub project, using an HTML file to load D3.js and a stylesheet, while importing and rendering content from a separate ES6 module. The visualization uses D3's `select` function to target a specific DOM element and set its text content, highlighting how to combine modular JavaScript with external styling.

JJesmaaar
71% match
Loading thumbnail…

Hello VizHub

This example displays a simple text message, "Hello VizHub!", centered on a dark blue background with large, light-colored Ubuntu font. It demonstrates the basic structure of a VizHub project, using an HTML file to load D3.js and a stylesheet, while importing and rendering content from a separate ES6 module. The visualization uses D3's `select` function to target a specific DOM element and set its text content, highlighting how to combine modular JavaScript with external styling.

JJesmaaar
71% match