# How can I directly edit and display markdown in Label Studio?

**URL:** <https://community.labelstud.io/t/how-can-i-directly-edit-and-display-markdown-in-label-studio/211>\
**Category:** Label Studio Support\
**Tags:** formatting, markdown\
**Created:** [May 23, 2024, 4:24pm UTC](https://community.labelstud.io/t/how-can-i-directly-edit-and-display-markdown-in-label-studio/211 "2024-05-23T16:24:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Quang-Duy](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.labelstud.io/quang-duy/32/422_2.png) [@Quang-Duy](https://community.labelstud.io/u/Quang-Duy)\
**Post date:** [May 23, 2024, 4:24pm UTC](https://community.labelstud.io/t/how-can-i-directly-edit-and-display-markdown-in-label-studio/211/1 "2024-05-23T16:24:24Z")

</div>

Hello everyone,  
Currently, my data is in markdown format in Python, and I use the following function to display it as text:

```python
def to_markdown(text):
    text = text.replace('•', ' *')
    return Markdown(textwrap.indent(text, '> ', predicate=lambda _: True))

```

Example data:

```auto
"Question": "Given a convex quadrilateral ABCD with AD = 6cm. Let $\\overrightarrow{v} = \\overrightarrow{AB} - \\overrightarrow{DC} - \\overrightarrow{CB}$. Calculate $\\overrightarrow{v}.\\overrightarrow{AD}$\n\n### Multiple Choice:\nA. 18\nB. 32\nC. 36\nD. 40"

```

However, I need a way to directly edit and display markdown in Label Studio. Is there any method to achieve this?

---

<div class="post-metadata">

**Author:** ![sajarin](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.labelstud.io/sajarin/32/56_2.png) [@sajarin](https://community.labelstud.io/u/sajarin)\
**Post date:** [May 24, 2024, 4:17pm UTC](https://community.labelstud.io/t/how-can-i-directly-edit-and-display-markdown-in-label-studio/211/2 "2024-05-24T16:17:08Z")

</div>

hey @Quang-Duy welcome and thanks for posting here 👋

The HyperText tag allows you to render HTML content, which can include markdown that has been converted to HTML.

1. **Convert Markdown to HTML** : Use a Python library like markdown to convert your markdown text to HTML.
2. **Create a Label Studio Configuration** : Use the HyperText tag to display the HTML content.

### Step 1: Convert Markdown to HTML

First, install the markdown library if you haven’t already:

`pip install markdown`

Then, use the following function to convert your markdown text to HTML:

```auto
import markdown

def markdown_to_html(text):
    return markdown.markdown(text)

```

### Step 2: Create a Label Studio Configuration

Use the HyperText tag in your Label Studio configuration to display the HTML content. Here’s an example configuration:

```auto
<View>
  <Header value="Please read the text" />
  <HyperText name="html_text" value="$html_text" />
  <Header value="Provide your annotation" />
  <TextArea name="annotation" toName="html_text" showSubmitButton="true" maxSubmissions="1" editable="true" required="true" />
</View>

```

### Example Usage

Here’s how you can integrate everything:

1. **Convert your markdown text to HTML** :

```auto
    markdown_text = """
    # Title
    * Bullet point 1
    * Bullet point 2
    """
    html_text = markdown_to_html(markdown_text)

```

1. **Prepare your data for Label Studio** :

```auto
    task_data = {
        "html_text": html_text
    }

```

1. **Import the task data into Label Studio** using the Label Studio SDK or API.

### Full Example

Here’s a full example of how you can prepare and import a task into Label Studio:

```auto
import markdown
from label_studio_sdk import Client

# Convert markdown to HTML
def markdown_to_html(text):
    return markdown.markdown(text)

markdown_text = """
# Title
* Bullet point 1
* Bullet point 2
"""
html_text = markdown_to_html(markdown_text)

# Prepare task data
task_data = {
    "html_text": html_text
}

# Connect to Label Studio
ls = Client(url="http://localhost:8080", api_key="your_api_key")

# Create a new project
project = ls.start_project(
    title="Markdown Annotation",
    label_config="""
    <View>
      <Header value="Please read the text" />
      <HyperText name="html_text" value="$html_text" />
      <Header value="Provide your annotation" />
      <TextArea name="annotation" toName="html_text" showSubmitButton="true" maxSubmissions="1" editable="true" required="true" />
    </View>
    """
)

# Import the task
project.import_tasks([task_data])

```

This will allow you to display and edit markdown content directly in Label Studio.

---

<div class="post-metadata">

**Author:** ![Quang-Duy](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.labelstud.io/quang-duy/32/422_2.png) [@Quang-Duy](https://community.labelstud.io/u/Quang-Duy)\
**Post date:** [May 24, 2024, 4:42pm UTC](https://community.labelstud.io/t/how-can-i-directly-edit-and-display-markdown-in-label-studio/211/3 "2024-05-24T16:42:29Z")

</div>

Hi @sajarin,  
Is the current method being used with the community version? I am currently using the enterprise version on the website. Is it possible to make direct edits like this? Thank you very much for helping me out.

---

<div class="post-metadata">

**Author:** ![sajarin](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.labelstud.io/sajarin/32/56_2.png) [@sajarin](https://community.labelstud.io/u/sajarin)\
**Post date:** [May 24, 2024, 5:16pm UTC](https://community.labelstud.io/t/how-can-i-directly-edit-and-display-markdown-in-label-studio/211/4 "2024-05-24T17:16:22Z")

</div>

hey @Quang-Duy, yes, the sample script above would be run separately from your Label Studio instance.

Basically you are programmatically creating a project with a label config using the hypertext tag, that takes in html, which was converted from markdown from this script. The script I pasted above uses the Label Studio API which should be accessible to you as an enterprise user.