# Applying markdown to bound tag value in perspective

**URL:** <https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569>\
**Category:** General Discussion\
**Tags:** perspective\
**Created:** [November 6, 2023, 7:37pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569 "2023-11-06T19:37:56Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![BenInReno](https://avatars.discourse-cdn.com/v4/letter/b/8edcca/32.png) [@BenInReno](https://forum.inductiveautomation.com/u/BenInReno)\
**Post date:** [November 6, 2023, 7:37pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569/1 "2023-11-06T19:37:56Z")

</div>

Does anyone know how to use the markdown component with a bound tag value? I would like to outline the returned value, as in the example in the User Manual under Markdown. The tag returns a number to the markdown component, and I can momentarily add markdown to the value in the designer, but once the tag value refreshes, the markdown disappears and the number is in plain text again, with no outline. Thanks.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 6, 2023, 7:41pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569/2 "2023-11-06T19:41:22Z")

</div>

Show us how you've set up the tag binding and post the markdown code so that we understand what you're trying to achieve. (Use the \</\> button to format your code.)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 6, 2023, 7:45pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569/3 "2023-11-06T19:45:36Z")

</div>

Sounds like you're binding to the markdown component's `source` property and not transforming it with an expression transform to add whatever markdown you want applied with it. Hard to know though how to help without knowing exactly what you've got and what you want, as @Transistor said (I didn't know you could add an 'outline' to text using markdown 🤔)

---

<div class="post-metadata">

**Author:** ![BenInReno](https://avatars.discourse-cdn.com/v4/letter/b/8edcca/32.png) [@BenInReno](https://forum.inductiveautomation.com/u/BenInReno)\
**Post date:** [November 6, 2023, 8:07pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569/4 "2023-11-06T20:07:47Z")

</div>

Thanks for both replies. I don't know if it's markdown or html, but I saw it in the Ignition 8.1 User Manual under the markdown section, at the bottom, the last example. I tried to do this same thing in the markdown component's source property, putting the returned tag value inside the html, and it displays fine until the tag refreshes and the value changes, at which point everything in the source component disappears except for the raw tag value. I don't have any code to paste here because I haven't gotten anything to work, and I'm not sure if I should use a Tag, Property, or Expression binding. I tried them all but haven't been able to figure it out. I just wanted to use the markdown component to apply some styling not available in Ignition's style section to a tag value that changes every few seconds. Our widget uses white text on a yellow background. It's hard to read so I wanted to outline the text in black.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 6, 2023, 8:14pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569/5 "2023-11-06T20:14:31Z")

</div>

None of the examples in the user manual add a text outline though? The bottom example makes the text bold and magenta

 ![Screenshot_20231107-064115_Chrome](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/0/d0500aba0125338227485657ca13a8b0d18643ac.jpeg)

To add markdown to the binding, you need to use a tag binding to read the tag value, and then add an expression transform which will add the markdown formatting.

Eg. In the expression transform, this will make the tag value bold and display with 1000s sep and 1dp

```auto
'**' + numberFormat({value}, '#,##0.0') + '**'

```

---

<div class="post-metadata">

**Author:** ![BenInReno](https://avatars.discourse-cdn.com/v4/letter/b/8edcca/32.png) [@BenInReno](https://forum.inductiveautomation.com/u/BenInReno)\
**Post date:** [November 6, 2023, 8:32pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569/6 "2023-11-06T20:32:05Z")

</div>

What the heck am I talking about? Sorry about that. I originally added "-webkit-text-stroke: 1px black" to the html in that last example to see if the outline works. It does, but I still haven't figured out how to apply html to a tag value. I just tried setting up a transform but just keep getting errors. I will keep trying different "Configure expression bindings" and "Configure Transforms", etc. until something works. Thanks.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 6, 2023, 8:35pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569/7 "2023-11-06T20:35:44Z")

</div>

What's the error? (mouse over the error to get a tool tip)

---

<div class="post-metadata">

**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\
**Post date:** [November 6, 2023, 9:39pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569/8 "2023-11-06T21:39:11Z")

</div>

> [@BenInReno](#):
>
> I would like to outline the returned value

The markdown should work as long as you get an expression that properly formats the html tags around it, but just in case I wanted to suggest an alternative that achieves an outline using `textShadow`, as in the following thread:

> [@Font Stroke Issue](https://forum.inductiveautomation.com/t/font-stroke-issue/79224/5):
>
> OK. You are talking about font stroke and fill. I don't think that's supported. See [How To Add Text Outline With CSS - Kinsta®](https://kinsta.com/blog/css-text-outline/#:~:text=Using%20the%20text%2Dstroke%20Property,add%20the%20%2Dwebkit%2D%20prefix). for details on this but I Designer seems to reject the Webkit style instructions. A simple solution is to use textShadow. Try the adding the following to the label's style properties: textShadow : black 0px 0px 4px [Shadow] [https://docs.inductiveautomation.com/display/DOC81/Style+Reference#StyleReference-TextMenu](https://docs.inductiveautomation.com/display/DOC81/Style+Reference#StyleReference-TextMenu)

Try just having a label with your number and add the following two items to `style`:

```auto
color: magenta
textShadow: black -1px 0px 1px, black 0px -1px 1px, black 1px 0px 1px, black 0px 1px 1px

```

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/b/cbbc80ad0e58c803ceb5c049dcbcdf892e98a1e4.png)

If you make the shadow any bigger than 1px you'll need to add in the corner shadows as well, but beyond 1px it usually looks a bit wrong anyway.

bonus with all corner shadows:

```auto
textShadow: black -1px -1px 1px, black -1px 1px 1px, black 1px -1px 1px, black 1px 1px 1px, black -1px 0px 1px, black 0px -1px 1px, black 0px 1px 1px, black 1px 0px 1px

```

```auto

```

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 6, 2023, 10:04pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569/9 "2023-11-06T22:04:49Z")

</div>

> [@Felipe\_CRM](#):
>
> Try just having a label with your number and add the following two items to `style`:

This is correct and it can be applied to a regular label. There is no need for markdown or HTML.

However,

> [@BenInReno](#):
>
> Our widget uses white text on a yellow background.

is the real problem. I'd have you up with the HR department for abuse of employees! Use proper, proven good GUI design and themed colors.

[https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes?searchId=ZW38C3WVR](https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes?searchId=ZW38C3WVR)

---

<div class="post-metadata">

**Author:** ![BenInReno](https://avatars.discourse-cdn.com/v4/letter/b/8edcca/32.png) [@BenInReno](https://forum.inductiveautomation.com/u/BenInReno)\
**Post date:** [November 6, 2023, 11:04pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569/10 "2023-11-06T23:04:57Z")

</div>

Thanks so much for the suggestion, for adding an example of exactly how it's done, and for the helpful links! The result looks good!

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [November 7, 2023, 6:23pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569/11 "2023-11-07T18:23:03Z")

</div>

> [@BenInReno](#):
>
> I just wanted to use the markdown component to apply some styling not available in Ignition's style

Sounds like something you should be doing with css.

Can you describe in details what you hope to achieve ?

edit: Well I should have read the whole thing first, seems like css has been suggested already.

---

<div class="post-metadata">

**Author:** ![BenInReno](https://avatars.discourse-cdn.com/v4/letter/b/8edcca/32.png) [@BenInReno](https://forum.inductiveautomation.com/u/BenInReno)\
**Post date:** [November 7, 2023, 6:37pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569/12 "2023-11-07T18:37:16Z")

</div>

It's done. You're right. The shadow was good, but the result using `'<p style="color:#FFFFFF; -webkit-text-stroke: .5px black">'+{value}+'</p'` in Configure Transform Expression is much crisper and looks better. To be honest, the problem was all with me. Because the result in Binding Preview was a CSS string, not the actual result, I thought the transform didn't work so I posted the question in the forum. In actuality, the markdown component 'source' was expecting that kind of string. All I had to do was hit Apply and it worked like it was supposed to.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [November 7, 2023, 6:41pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569/13 "2023-11-07T18:41:45Z")

</div>

Seems like if you find that this looks better, you could try to use the exact same value through css directly.  
Should look exactly the same, AND be much simpler.

edit: What version of ignition are you on ?

---

<div class="post-metadata">

**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\
**Post date:** [November 7, 2023, 6:56pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569/14 "2023-11-07T18:56:13Z")

</div>

If you have a version before advanced stylesheets (8.1.22), I found this (really hacky) workaround:

> [@Webkit doesn't work in perspective style](https://forum.inductiveautomation.com/t/webkit-doesnt-work-in-perspective-style/36848/4):
>
> you could hack your way around it with css injecting in a classstyle. Not really perfect, but eh xd Might aswell use the theme css tho if you already use that Using a binding and naming it with a dict also seems to work, eventho it gives a warning in the designer. Idk if this will cause any further issues, but it looks to be working.

This would go on a binding on the style

```auto
def transform(self, value, quality, timestamp):
	style = {}
	style['fontSize'] = 60
	style['color']='magenta'
	style['-webkit-text-stroke']='2px green'
	return style

```

I don't really recommend it but it does seem to work:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/8/d8c8fac729db7b08de20bb91e65a641e2ea1f108.png)

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [November 7, 2023, 7:02pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569/16 "2023-11-07T19:02:47Z")

</div>

Wouldn't "classical" css injection work just as well ?  
I mean putting `} .psc-class_name { -webkit-text-stroke: 2px green;} {` on a background property in a perspective style class.

---

<div class="post-metadata">

**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\
**Post date:** [November 7, 2023, 7:44pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569/17 "2023-11-07T19:44:01Z")

</div>

Also an option, and better if it's not just going to be a one-off label.

---

<div class="post-metadata">

**Author:** ![BenInReno](https://avatars.discourse-cdn.com/v4/letter/b/8edcca/32.png) [@BenInReno](https://forum.inductiveautomation.com/u/BenInReno)\
**Post date:** [November 7, 2023, 8:17pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569/18 "2023-11-07T20:17:59Z")

</div>

If that's simpler, I'm definitely interested, but I don't know where to put that.

---

<div class="post-metadata">

**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\
**Post date:** [November 7, 2023, 8:34pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569/19 "2023-11-07T20:34:08Z")

</div>

Make a custom style:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/e/8e560d9e61362c7990afc5c4502140c026db2e6e.png)  
Then, in some innocuous property like `background-image`, add something like what is shown:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/e/ce81c8b258e16512f572aa46b91631c0a84f2e65.png)

```auto
}.psc-MagentaWithTealOutline{-webkit-text-stroke: 2px teal; color: magenta}{

```

Finally, you can apply the class to whatever you want:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/9/f9f3e56f9d5c6f1cc8dcfbb6add55abf5c2d9f2b.png)

---

<div class="post-metadata">

**Author:** ![BenInReno](https://avatars.discourse-cdn.com/v4/letter/b/8edcca/32.png) [@BenInReno](https://forum.inductiveautomation.com/u/BenInReno)\
**Post date:** [November 7, 2023, 8:39pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569/20 "2023-11-07T20:39:51Z")

</div>

Wow, this is really slick! Thanks!

---

<div class="post-metadata">

**Author:** ![BenInReno](https://avatars.discourse-cdn.com/v4/letter/b/8edcca/32.png) [@BenInReno](https://forum.inductiveautomation.com/u/BenInReno)\
**Post date:** [November 7, 2023, 8:40pm UTC](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569/21 "2023-11-07T20:40:22Z")

</div>

This is a pretty cool option and works well. Thanks!

[Next page](https://forum.inductiveautomation.com/t/applying-markdown-to-bound-tag-value-in-perspective/81569.md?page=2)