LogoLogo
Developer HubGitHubContact Us
  • Welcome!
  • Olive Helps
    • Platform
      • How Olive Helps Works
      • Installation
      • Account Creation
      • Distributing Olive Helps
    • FAQs
      • General Loop FAQs
      • Loop Development FAQs
      • Olive Helps User FAQs
      • Security / IT FAQs
    • Data Security
      • User Data
      • Antivirus and Firewalls
  • Loop Development Kit
    • Your First Loop
      • Become a Loop Author
      • Creating a Loop
      • Build Your Loop
      • Local Loop Installation
      • Restarting Local Loops
    • Troubleshooting
    • Loop Security
      • Permissions
      • Environment Permissions
    • Loop Publication
      • Loop Approval Checklist
    • Loop Analytics Library
    • Examples
  • Documentation
  • Interfaces
  • Type Alias
  • Enumerations
  • Whisper Components
    • Base Attributes
    • Autocomplete
    • Box
    • Breadcrumb
    • Button
    • Chart
    • CollapseBox
    • Grid
    • Checkbox
    • Date Time
    • Divider
    • DropZone
    • Email
    • Icon
    • List Pair
    • Link
    • Pagination
    • Number
    • Markdown
    • Message
    • Password
    • Progress
    • Radio
    • Rating
    • RichTextEditor
    • Section Title
    • Select
    • Text Input
    • Telephone
    • Typography
  • APTITUDES
    • What are Aptitudes?
    • Browser
    • Clipboard
    • Config
    • Cursor
      • Screen Scaling Behavior
    • Document
    • Filesystem
    • Keyboard
    • Network
    • Process
    • Screen
    • Search
      • Index
    • System
    • UI
      • Loop UI Handlers
    • User
      • JWT
    • Vault
    • Whisper
      • Whisper Updates
      • JSX Whispers
    • Window
      • Screen Scaling Behavior
  • Release Notes
    • What's New
      • Olive Helps v0.55.0
      • Olive Helps v0.54.1
      • Olive Helps v0.53.1
      • Olive Helps v0.51.2
      • LDK v4.0.0
      • Olive Helps v0.50.3
      • Olive Helps v0.49.5
      • LDK v 3.18.0
      • Olive Helps v0.47.2
      • Olive Helps v0.46.2
      • LDK v 3.17.0
      • Olive Helps v0.45.4
      • Olive Helps v0.44.2
      • Olive Helps v0.43.1
      • Olive Helps v0.42.1
      • Olive Helps v0.41.4
      • Olive Helps v0.40.2
      • Olive Helps v0.39.4 & LDK v3.16.0
      • Olive Helps v0.38.8 & LDK v3.15.0
      • Olive Helps v0.36.5
      • Olive Helps v0.36.4
    • Archive
      • Olive Helps v0.36.3 & LDK v3.14.0
      • Olive Helps v0.34.4
      • LDK v3.13.0
      • Olive Helps v0.32.2 & LDK v3.12.0
      • Olive Helps v0.31.2 & LDK v3.11.0
      • Olive Helps v0.30.2 & LDK v3.10.0
      • Olive Helps v0.29.4
      • Olive Helps v0.29.3 & LDK v3.9.0
      • Olive Helps v0.28.3 & LDK v3.8.0
      • Olive Helps v0.27.7
      • Olive Helps v0.27.5
      • Olive Helps v.027.4
      • Olive Helps v0.27.2 & LDK v3.7.0
      • Olive Helps v0.25.3 & LDK v3.5.1
      • Olive Helps v0.24.6 & LDK v3.4.0
      • Olive Helps v0.23.2 & LDK v3.3.0
      • Olive Helps v0.22.3 & LDK v3.2.0
Powered by GitBook
On this page
  • Props:
  • Markdown Crash Course
  • Examples

Was this helpful?

  1. Whisper Components

Markdown

Markdown is a lightweight markup language for creating formatted text.

PreviousNumberNextMessage

Last updated 3 years ago

Was this helpful?

Props:

Properties
Descriptions
Required
Default

copyable

MarkdownWhisperCopyMode.Body- Copy the text from the body of the component (including markdown).

body

The content that you want displayed. Supports markdown.

onCopy

Executes the provided function when the Markdown is copied.

tooltip

Text that appears when hovering over the component.

onLinkClick

Whisper event handler that can be used to hook into click events on from links in the markdown component. Receives the label provided for the link when it is clicked.

Markdown Crash Course

Markdown is a shorthand way of adding styling to text. Here's a quick breakdown of some of the ways that you can achieve certain effects using it.

  • Styling: Support markdown including Bold ~~strikethrough, italics, and etc.

    • Headings: We only support 3 different headings on Olive Helps

    # Heading level 1

    Heading level 1

    ## Heading level 2

    Heading level 2

    ### Heading level 3

    Heading level 3

    • Bold:

      Markdown
      Rendered Output

      I just love **bold text**.

      I just love bold text.

      I just love __bold text__.

      I just love bold text.

    • Italic:

      Markdown
      Rendered Output

      Italicized text is the *cat's meow*.

      Italicized text is the cat’s meow.

      Italicized text is the _cat's meow_.

      Italicized text is the cat’s meow.

      A*cat*meow

      Acatmeow

    • Bold and Italic

      Markdown
      Rendered Output

      This text is ***really important***.

      This text is really important.

      This text is ___really important___.

      This text is really important.

      This text is __*really important*__.

      This text is really important.

      This text is **_really important_**.

      This text is really important.

      This is really***very***important text.

      This is reallyveryimportant text.

    • BlockQuotes:

      > Dorothy followed her through many of the beautiful rooms in her castle.

      The rendered output looks like this:

      Dorothy followed her through many of the beautiful rooms in her castle.

    • Unordered Lists

      To create an unordered list, add dashes (-), asterisks (*), or plus signs (+) in front of line items. Indent one or more items to create a nested list.

      Markdown
      Rendered Output

      - First item - Second item - Third item - Fourth item

      • First item

      • Second item

      • Third item

      • Fourth item

      * First item * Second item * Third item * Fourth item

      • First item

      • Second item

      • Third item

      • Fourth item

      + First item + Second item + Third item + Fourth item

      • First item

      • Second item

      • Third item

      • Fourth item

      - First item - Second item - Third item - Indented item - Indented item - Fourth item

      • First item

      • Second item

      • Third item

        • Indented item

        • Indented item

      • Fourth item

    • Tables:

    • A table:
      
      | Table Header 1 | Table header 2 |
      | - | - |
      | Row 1 Col 1 | Row 1 Col 2 |
      | Row 2 Col 1 | Row 2 Col 2 |`;

    • image

![Tux, the Linux mascot](/assets/images/tux.png)

Examples

Now let's take a closer look of Markdown component! We use different markdown syntaxes to complete this example.

If you hover your cursor to the first component that contains the penguin, you are able to see a tooltip pop up. And if you click that area, you can copy the first component. This is the copied markdown text:

<h1>Guess which link is the correct link of Olive Helps dev hub.</h1>
<h2>You only have a single chance!</h2>
<p><img src="https://d33wubrfki0l68.cloudfront.net/e7ed9fe4bafe46e275c807d63591f85f9ab246ba/e2d28/assets/images/tux.png" alt="Tux"/></p>
<p><strong>We have a brief description table for you:</strong></p>
<table><thead><tr><th style="text-align:left">People</th><th style="text-align:left">What they say</th></tr></thead><tbody><tr><td style="text-align:left">Josef:</td><td style="text-align:left">Link 3 is the correct one.</td></tr><tr><td style="text-align:left">Michael:</td><td style="text-align:left">Link 1 is not the correct one.</td></tr><tr><td style="text-align:left">Brett:</td><td style="text-align:left">They are all lying.</td></tr></tbody></table>
<p>Knowing that only one person is not lying and we only have 1 link that can direct you to Olive Helps, which one is the correct link?</p>
import { whisper } from '@oliveai/ldk';
import { MarkdownWhisperCopyMode, WhisperComponentType } from '@oliveai/ldk/dist/whisper/types';


const markdownSampleText = `
# Guess which link is the correct link of Olive Helps dev hub.
## You only have a single chance!

![Tux](https://d33wubrfki0l68.cloudfront.net/e7ed9fe4bafe46e275c807d63591f85f9ab246ba/e2d28/assets/images/tux.png)

**We have a brief description table for you:**

| People | What they say |
| :----------| :----------- |
| Josef:  | Link 3 is the correct one. |
| Michael:| Link 1 is not the correct one. |
| Brett:  | They are all lying. |

Knowing that only one person is not lying and we only have 1 link that can direct you to Olive Helps, which one is the correct link? 


`;

const markdown = `
# Links:
[Link 1](# "A Link")

[Link 2](#)

[Link 3](https://www.oliveai.dev/)
`;

export const markdownWhisper = async () => {
  await whisper.create({
    label: 'Markdown whisper',
    onClose: () => {
      console.debug('closed');
    },
    components: [
      {
        body: markdownSampleText,
        type: WhisperComponentType.Markdown,
        copyable: MarkdownWhisperCopyMode.Body,
      },
      {
        body: markdown,
        type: WhisperComponentType.Markdown,
        onLinkClick: (error, linkName) => {
          console.info(`Received click on the link: ${JSON.stringify(linkName)}`);
          if (linkName === 'Link 1') {
            console.log('This is not the correct link.');
          } else if (linkName === 'Link 2') {
            console.log('This is not the correct link.');
          } else if (linkName === 'Link 3') {
            console.log(
              'Yes! This is the correct link! You are going to Olive Helps Dev Hub... ',
              );
          } else {
            if (error) {
              console.log(error.message);
            }
          }
        },
        tooltip: 'Link 3 is the right answer!',
      },
    ],
  });
}
import { React, ReactWhisper } from '@oliveai/ldk';
import { MarkdownWhisperCopyMode } from '@oliveai/ldk/dist/whisper/types';

const markdownSampleText = `
# Guess which link is the correct link of Olive Helps dev hub.
## You only have a single chance!

![Tux](https://d33wubrfki0l68.cloudfront.net/e7ed9fe4bafe46e275c807d63591f85f9ab246ba/e2d28/assets/images/tux.png)

**We have a brief description table for you:**

| People | What they say |
| :----------| :----------- |
| Josef:  | Link 3 is the correct one. |
| Michael:| Link 1 is not the correct one. |
| Brett:  | They are all lying. |

Knowing that only one person is not lying and we only have 1 link that can direct you to Olive Helps, which one is the correct link? 
`;

const markdown = `
# Links:
[Link 1](# "A Link")

[Link 2](#)

[Link 3](https://www.oliveai.dev/)

`;
const ReactMarkdownExample: React.FunctionComponent<Object> = () => {

  return (
    <oh-whisper
      label="Markdown whisper"
      onClose={() => {
        console.debug('closed');
      }}
      >
      <oh-markdown 
        body={markdownSampleText}
        copyable={MarkdownWhisperCopyMode.Body} 
      />
      <oh-markdown
        body={markdown}
        tooltip="Link 3 is the right answer!"
        onLinkClick={(error, linkName) => {
          console.info(`Received click on the link: ${JSON.stringify(linkName)}`);
          if (linkName === 'Link 1') {
            console.log('This is not the correct link.');
          } else if (linkName === 'Link 2') {
            console.log('This is not the correct link.');
          } else if (linkName === 'Link 3') {
            console.log('Yes! This is the correct link! You are going to Olive Helps Dev Hub... ');
          } else {
            if (error) {
              console.log(error.message);
            }
          }
        }}
      />
    </oh-whisper>
  );
};

ReactWhisper.renderNewWhisper(<ReactMarkdownExample/>);

Reference:

https://www.markdownguide.org/basic-syntax/
links