HTML markup code not working for SharePoint Online List calculated column, displays plain text

Calculated fields have been around for years and used to display values based on formulas in SharePoint Lists and Libraries, similar to Microsoft Excel.
It also allowed developers to add HTML markup or script elements into calculated fields.

But the functionality to execute custom markup in calculated fields in SharePoint Online has been blocked and deprecated since 2017. For SharePoint on-premises 2013 and 2016 versions, you can keep this enabled using the CustomMarkupInCalculatedFieldDisabled property.

Microsoft announcement Reference - Handling HTML markup in SharePoint calculated fields

❓️ Can I add custom HTML markup to calculated fields in SharePoint Online ?

No, you will just see the plain HTML code as text. Calculated fields are blocked to execute custom markup since June 13, 2017 and all unsupported markup is ignored.

❓️ Can I add custom HTML markup to calculated fields in SharePoint 2013/2016 ?

Yes, can be enabled using CustomMarkupInCalculatedFieldDisabled property or using JSLink to render list fields. This web application setting lets an on-premises administrator determine whether execution of custom markup in calculated fields in a given web application is blocked.

$webApp = Get-SPWebApplication http://code2care.org
$webApp.CustomMarkupInCalculatedFieldDisabled = $false
$webApp.Update()

The value of CustomMarkupInCalculatedFieldDisabled is true by default, set it to false.

❓️ How can I add custom HTML markup in SharePoint Online column ?

Use JSON column formatting to customize Modern SharePoint. Works with SharePoint on-prem as well. Refer steps here.

Considering same example shown earlier, lets use JSON column formatting to customize the display for the related calculated or any other filed.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "txtContent": "Open Task",
  "attributes": {
    "target": "_blank",
    "href": "='http://c2c.sharepoint.com/sites/c2cSP/Tasks' + @currentField"
  }
}

txtContent = text for the link
@currentField = filed which has the TaskID

⭐ Different ways to add custom HTML code to SharePoint List fields ?

1. JSON column formatting with Modern SharePoint sites - Preferred approach.
2. SPFX extensions for SharePoint Modern sites - Recommended, requires more development.
3. Power Automate to set the column value using FLOW when List item is added/updated.
4. Custom JQuery Script Classic SharePoint sites - Not recommended, avoid HTML injection.
5. JSLink to render fields using Script Editor web part - Not recommended with Modern framework.
6. SharePoint Designer customization - Not recommended, SPD 2013 will be deprecated in few years.