TheLazy.Dev
Portfolio GitHub

Blog

markdown |opensource |javascript |tutorial

The Only Guide To Slack Mrkdwn (not markdown) Formatting w Codes

nikl

Nik L.

Posted on February 15, 2024

The Only Guide To Slack Mrkdwn (not markdown) Formatting w Codes

More Slack articles to read:

  1. How Does Slack Ensure Timely Alerts with Their Bespoke Tracing Architecture for Notifications?
  2. Customising Transactional Notifications using Slack Block Kit and JSONNET (with Examples from JIRA)
  3. The PM’S Guide to Sending Real-Time Transactional Notifications Using Slack Webhooks (With JSONNET)

In this extensive guide, we delve into the intricacies of Slack's unique markdown language, mrkdwn, which empowers developers to create engaging, organized, and styled messages on the Slack platform.

First, let's clarify that mrkdwn differs significantly from traditional Markdown despite initial appearances suggesting otherwise. Although both allow plaintext notation for enhanced text formatting, they cater to distinct objectives resulting in dissimilar syntax structures. Here, we outline the major distinctions between them:

Markdown:

  1. Designed primarily as a lightweight markup language for converting plaintext into structurally sound HTML.
  2. Ideal for authors looking to 'markup' their content effortlessly for seamless conversion to HTML format.
  3. Supports multiple header levels using "#," allowing headers like "

    " via "### Header 3."

  4. Includes table creation and syntax highlighting options, making it suitable for composing complete documents.

Slack mrkdwn:

  1. Tailor-made exclusively for Slack, focusing on enhancing visual appeal and utilizing the platform's inherent features such as "@-mentions" and channels.
  2. Streamlined and straightforward, accommodating brevity required in most Slack communications.
  3. Utilizes "asterisks" for bold text, "_underscores_" for italics, and "~tilde symbols~\" for strikethroughs.
  4. Features specialized link formats, including "<@U12345678>" for mentioning users and "<!channel>" for broadcasting announcements across specific channels.

Now that we better understand the differences between mrkdwn and standard Markdown, let's examine the fundamentals of mrkdwn and learn about its various components:

Basic Formatting Essentials:

  1. Asterisks (*): Used for wrapping text to produce bold font style, emphasizing words or phrases. Example: **Text wrapped with asterisks**.
  2. Underscores (_): Wrapped around text to apply italicized styling, perfect for subtle emphasis or indicating work titles. Example: _Italicized text._.
  3. Tilde Symbols (~): Applied around text to strike it out, demonstrating corrections or drawing attention to obsolete information. Example: ~Struck-through text.~
  4. Backticks (`): Useful for inline code highlighting, enclosing terms, codes, or distinctive jargon. Example: '`inline code example`'.
  5. Triple Backticks (`)**: Delimiting long code segments or pre-styled texts for multiline usage. Example: 
\`\`\`
Multi-line
Code sample
\`\`\`
Enter fullscreen mode Exit fullscreen mode

When constructing notifications for your application, incorporate these basics accordingly:

{
    "blocks": [
        {
            "type": "section",
            "text": {
                "type": "mrkdwn",
                "text": "*Welcome to our Coding Workshop!* :computer: \n\n In this workshop, we'll cover:\n - _Introduction to JavaScript_ \n - **HTML Basics** \n - `CSS Fundamentals` \n\n ```

javascript\n// Example JavaScript code\nfunction greet(name) {\n   return `Hello, ${name}! Welcome to the workshop!`;\n}\n\nconsole.log(greet('John'));\n

```"
            }
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

Result:

It would look like this

As a best practice, utilize mrkdwn sparingly to ensure legibility and focus on conveying crucial information effectively. Access detailed documentation covering additional special formatting options available in Slack's mrkdwn formatting reference page.

Engaging Directly with Users and Content Through Links & Mentions

Slack notifications facilitate interaction through mentions and links:

a. Internal Slack links and mentions:

  • Use the '@' symbol for specific users or groups like @here, @everyone, or @channel. Remember proper etiquette – don't @everyone unless necessary.
  • Employ the hash symbol (#) to direct users to alternate channels within Slack.

b. Hyperlinking externally:

Examples:

{
  "blocks": [
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "Explore the <https://www.suprsend.com|Suprsend platform> for advanced marketing solutions \n Reach out to @andrew for personalized assistance \n Notify the entire team with an @channel mention \n Join the conversation in the #random channel \n Contact our support team via email at <mailto:support@suprsend.com|support@suprsend.com>"
      }
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Result:

Slack Tagging

Structuring Your Message

Improve readability using mrkdwn lists and blockquotes:

a. No specific syntax for unordered lists in mrkdwn, simply choose any preferred bullet character.
b. Apply numbers or letters for ordered lists.
c. Add blockquotes starting a line with '>' and a space.

Limit list usage to avoid confusing readers and maintain emphasis.

Examples:

{
    "blocks": [
        {
            "type": "section",
            "text": {
                "type": "mrkdwn",
                "text": "Programming Languages:\n\n- JavaScript: Widely used for web development and building interactive web applications.\n- Python: Known for its simplicity and readability, often used in data science, artificial intelligence, and backend development.\n- Java: A versatile language used in enterprise applications, Android app development, and large-scale systems.\n- C#: Primarily used in Microsoft technologies for building Windows applications, web services, and games."
            }
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

Formatted Result:

Slack Lists and Blockquotes Example

Enhance Your Slack Communication with Advanced mrkdwn Capabilities

Slack's mrkdwn provides extra features beyond basic formatting to improve communication experience. Discover four valuable options below:

Date Formatting

Present dates consistently using timestamps in UNIX format combined with the following syntax:

<!date^UNIX_TIMESTAMP^{date_option}^{fallback_text}>
Enter fullscreen mode Exit fullscreen mode

For instance, obtain the current date in UNIX format via:

const unixTimestamp = Math.floor(Date.now() / 1000);
Enter fullscreen mode Exit fullscreen mode

Available date options include:

  • date_short
  • date_short_pretty
  • date_long
  • date_long_pretty
  • date_num
  • date 
{
  "blocks": [
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "Today's Date: \n\n<!date^1697250654^{date_short}|February 15, 2024> \n<!date^1697250654^{date_short_pretty}|February 15, 2024> \n<!date^1697250654^{date_long}|February 15, 2024> \n<!date^1697250654^{date_long_pretty}|February 15, 2024> \n<!date^1697250654^{date_num}|February 15, 2024> \n<!date^1697250654^{date}|February 15, 2024>"
      }
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

See the output below:

Slack Date Formatting

Combining Styles

Mix styles, such as applying bold format to a link:

{
  "blocks": [
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "Here is a *bolded* link to <https://suрrѕеnd.com|*Supрrѕеnd*>."
      }
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Output:

Slack Bold Link

Introducing Emoticons

Add emotions with diverse emoticons:

{
  "blocks": [
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": ":cyclone: :mountain: :ocean: :earth_africa: :volcano: :milky_way: :comet: :leaves: :fallen_leaf: :sunflower: :tulip: :mushroom: :shell: :turtle: :penguin: :koala: :octopus: :tropical_fish:"
      }
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Output:

Slack Emoji

Creating Alert Samples

Integrate all features mentioned earlier to generate helpful samples for an Application Monitoring & Observability Platform:

{
  "blocks": [
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "@team \n @OpsTeam \n\n *<!date^1697250654^{date_num}|February 15, 2024>* \n\n *[ALERT]: Database Connectivity Issue Detected!* :exclamation: \n - Database: `CustomerDB` \n - Status: `Critical` \n\n :bar_chart: Metrics \n\n *Connection Pool Utilization*: _90%_ (Threshold: _80%_) \n *Query Latency*: _500ms_ (Target: _100ms_) \n *Transactions per Second*: _200_ (Expected: _300_) \n :world_map: Location: `Data Center East` \n  \n :information_source: Additional Information:\n <https://example.com/database-status|View database status>\n <https://example.com/alert-history|Check alert history>\n  \n :white_check_mark: Steps to Resolve: \n 1. Verify network connectivity to the database server.\n 2. Optimize database queries for better performance.\n 3. Implement connection pooling strategies to manage resource utilization."
      }
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Output:

Slack Sample Alert

Explore further possibilities offered by mrkdwn to maximize productivity and collaboration within Slack environments.

More Slack articles to read:

  1. How Does Slack Ensure Timely Alerts with Their Bespoke Tracing Architecture for Notifications?
  2. Customising Transactional Notifications using Slack Block Kit and JSONNET (with Examples from JIRA)
  3. The PM’S Guide to Sending Real-Time Transactional Notifications Using Slack Webhooks (With JSONNET)
💖 💪 🙅 🚩
nikl
Nik L.

Posted on February 15, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

The Only Guide To Slack Mrkdwn (not markdown) Formatting w Codes
markdown The Only Guide To Slack Mrkdwn (not markdown) Formatting w Codes

February 15, 2024