Markdown-mod - Improve the built-in markdown card

Great thanks.

I don’t know if you noticed the difference but I’m pretty sure you need a space after [[ and before ]] for it to work. Like you do in your last line which worked.

Is there any way to specify a size for the icon?

<ha-icon ... style="width: 48px; height: 48px;"></ha-icon>

Thank you very much!

please let me get back on my markdown card using the binary_sensor.meteoalarm_brabant.

If this sensor is ‘on’, it produces the attributes I show with this config:

  - type: markdown
    content: >
      # <font color= grey> Weer Alarm Brabant:  [[ binary_sensor.meteoalarm_brabant.state ]] </font>

      ___

      **Alarm code**

      <font color= [[ sensor.weer_alarm.state ]]> - [[ sensor.weer_alarm.state ]] </font>

      <font color= [[ sensor.weer_alarm.state ]]> - [[ binary_sensor.meteoalarm_brabant.attributes.awareness_level ]] </font>

      <font color= [[ sensor.weer_alarm.state ]]> - [[ binary_sensor.meteoalarm_brabant.attributes.awareness_type ]] </font>

      **Headline**

      <font color= #4caf50> - [[ binary_sensor.meteoalarm_brabant.attributes.headline ]] </font>

      **Event**

      <font color= #4caf50> - [[ binary_sensor.meteoalarm_brabant.attributes.event ]] </font>

      **Status**

      <font color= #4caf50> - [[ binary_sensor.meteoalarm_brabant.attributes.description ]] </font>

      ___

however, when there is no alarm, the binary_sensor is ‘off’ and none of its attributes is created, so the card looks silly.

So, my question would be if we could have conditional text via the markdown mod.

otherwise Id need something like this:

  - type: custom:vertical-stack-in-card
    cards:
      - type: entities
        title: Weeralarm
        show_header_toggle: false
        entities:
          - binary_sensor.meteoalarm_brabant
          - sensor.weer_alarm
      - type: markdown
        content: >
          <font color= grey> Info:  [[ binary_sensor.meteoalarm_brabant.attributes.attribution ]] </font>
      - type: conditional
        conditions:
          - entity: binary_sensor.meteoalarm_brabant
            state: 'on'
        card:
          type: markdown
          content: >
            # <font color= grey> Weer Alarm Brabant:  [[ binary_sensor.meteoalarm_brabant.state ]] </font>

            ___

            **Alarm code**

            <font color= [[ sensor.weer_alarm.state ]]> - [[ sensor.weer_alarm.state ]] </font>

            <font color= [[ sensor.weer_alarm.state ]]> - [[ binary_sensor.meteoalarm_brabant.attributes.awareness_level ]] </font>

            <font color= [[ sensor.weer_alarm.state ]]> - [[ binary_sensor.meteoalarm_brabant.attributes.awareness_type ]] </font>

            **Headline**

            <font color= #4caf50> - [[ binary_sensor.meteoalarm_brabant.attributes.headline ]] </font>

            **Event**

            <font color= #4caf50> - [[ binary_sensor.meteoalarm_brabant.attributes.event ]] </font>

            **Status**

            <font color= #4caf50> - [[ binary_sensor.meteoalarm_brabant.attributes.description ]] </font>

            ___

30
which is ok of course, but needs yet again another card…
thanks for having a look!

(If you read my post before the edit, forget it, I made a mistake in the card and used an - in front of the conditional card…)

Yes.

Pro tip: Don’t grow too attached to markdown-mod…

A yes, I had seen that. Couldn’t find an immediate way to do what I did with the conditional card though. Maneged the individual templates, but not for the full card ?

o dear, that sounds ominous. Having new and exciting ideas for the future?

could you please tell me if we can have conditional font coloring based on the state of an entity?

using:

  - type: markdown
    content: >
      # <font color= grey>Home Summary</font>

      ___

      **Status**

      <font color= green > - [[ sensor.home_badge.attributes.desc ]] </font>
      etc

now, Id like to have the color change according to the state of a sensor.family_home, like

if (states('sensor.family_home' == 0) return 'grey';
return 'green';

if at all possible, how would I need to enter that in the markdown card?
thanks for having a look

1 Like

ok thanks, found that earlier, but because I didn’t see an example of what I was looking for, thought it not to be available. Made it up to this:

      <[[ if(sensor.hubs_badge == '0' , font color= #4caf50, font color= red) ]]> - [[ sensor.hubs_badge.attributes.desc ]] </font>

which colors my text correctly. So cool, and thanks a bunch for making this all possible. A great addition to the tool set it is.

Now I need to take it 1 step further and have the text flash/blink in red when != '0' to signal the error status. Would there be an easy way of doing so?


please let me ask about another property that would be very nice to use, multiline notation: can we write:

      <[[ if(sensor.family_home == '0' , font color= grey, if(sensor.family_home == '1' , font color= yellow, if(sensor.family_home == '2' , font color= blue,if(sensor.family_home == '3' , font color= pink, if(sensor.family_home == '4' , font color= orange,if(sensor.family_home == '5' , font color= brown,font color= red)))))) ]]> - [[ sensor.home_badge.attributes.desc ]] </font>

in a mutliline way? Ive tried to simply add a line break after each then- comma, and the template still works, but it is also shown in the markup frontend.

      <[[ if(sensor.family_home == '0' , font color= grey, 
          if(sensor.family_home == '1' , font color= yellow, 
          if(sensor.family_home == '2' , font color= blue,
          if(sensor.family_home == '3' , font color= pink, 
          if(sensor.family_home == '4' , font color= orange,
          if(sensor.family_home == '5' , font color= brown,
          font color= red)))))) ]]> - [[ sensor.home_badge.attributes.desc ]] </font>

I’ve tried | and > before the first template, but no luck there either.

btw the above template also works as:

      <font color = [[ if(sensor.family_home == '0' , grey, if(sensor.family_home == '1' , yellow, if(sensor.family_home == '2' , blue,if(sensor.family_home == '3' , orange, if(sensor.family_home == '4' , green,if(sensor.family_home == '5' , brown,font color= red)))))) ]]> - [[ sensor.home_badge.attributes.desc ]] </font>

For blinking stuff you’d probably need card-mod to have somewhere to put the keyframes.

About the multiline templates… again, don’t get too attached to markdown-mod...

1 Like

I can see someone found one of my two hidden links.

Here’s the other one:

It seems the markdown-card will support jinja2 templates natively from 0.98.
And also tags.

So this plugin will pretty much be deprecated then.

1 Like

Cool module! But as a matter of fact the ‘if-statement’ which aren’t true are resulting in the following code: [object SVGGElement]

I’m using this code:

type: markdown
title: Default markdown card
content: >
  [[ if(sensor.grijze_bak == "1", "<ha-icon icon='mdi:trash-can'></ha-icon> Morgen wordt de grijze bak geleegd.") ]]
  [[ if(sensor.grijze_bak == "0", "<ha-icon icon='mdi:trash-can'></ha-icon> Vandaag wordt de grijze bak geleegd.") ]]
  [[ if(sensor.papier == "1", "<ha-icon icon='mdi:trash-can'></ha-icon> Morgen wordt het oud papier opgehaald.") ]]
  [[ if(sensor.papier == "0", "<ha-icon icon='mdi:trash-can'></ha-icon> Vandaag wordt het oud papier opgehaald.") ]]
  [[ if(sensor.plastic_bak == "1", "<ha-icon icon='mdi:trash-can'></ha-icon> Morgen wordt de plastic bak geleegd.") ]]
  [[ if(sensor.plastic_bak == "0", "<ha-icon icon='mdi:trash-can'></ha-icon> Vandaag wordt de plastic bak geleegd.") ]]
  [[ if(sensor.groene_bak == "1", "<ha-icon icon='mdi:trash-can'></ha-icon> Morgen wordt de groene bak geleegd.") ]]
  [[ if(sensor.groene_bak == "0", "<ha-icon icon='mdi:trash-can'></ha-icon> Vandaag wordt de groene bak geleegd.") ]]

Any suggestions to hide this [object SVGGElement]?

The <else> clause is not optional. It can be an empty string (""), but it must be there.

1 Like

Thanks @thomasloven!

It seemed to be a combination of two factors. I now changed the code as below mentioned which the problem!

       - content: >
          <font color= red> 
          [[ if(sensor.grijze_bak == 1, "<ha-icon icon=mdi:trash-can></ha-icon>Morgen wordt de grijze bak geleegd.", " ") ]] 

          [[ if(sensor.grijze_bak == 0, "<ha-icon icon=mdi:trash-can></ha-icon>Vandaag wordt de grijze bak geleegd.", " ") ]] 

          [[ if(sensor.papier == 1, "<ha-icon icon=mdi:trash-can></ha-icon>Morgen wordt het oud papier opgehaald.", " ") ]] 

          [[ if(sensor.papier == 0, "<ha-icon icon=mdi:trash-can></ha-icon>Vandaag wordt het oud papier opgehaald.", " ") ]] 

          [[ if(sensor.plastic_bak == 1, "<ha-icon icon=mdi:trash-can></ha-icon>Morgen wordt de plastic bak geleegd.", " ") ]] 

          [[ if(sensor.plastic_bak == 0, "<ha-icon icon=mdi:trash-can></ha-icon>Vandaag wordt de plastic bak geleegd.", " ") ]] 

          [[ if(sensor.groene_bak == 1, "<ha-icon icon=mdi:trash-can></ha-icon>Morgen wordt de groene bak geleegd.", " ") ]] 

          [[ if(sensor.groene_bak == 0, "<ha-icon icon=mdi:trash-can></ha-icon>Vandaag wordt de groene bak geleegd.", " ") ]] </font>
        type: markdown

Will it be possible to do something like this?

[[ if(sensor.number_of_lights_on.state == "0", "All lights are off", "[[ sensor.number_of_lights_on.state ]] lights are on") ]]

So putting a state in the <else>

Thanks for the link Thomas.
I already have see the docs, but i’m unfortunately not tech enough to find the answer myself :slight_smile:
Could you please point out the how to do it.
Thanks again.

Know what? 0.98 has been released. That means this card is now deprecated! :tada:

The default markdown card in 0.98 and later supports jinja templates, so now you can do:

type: markdown
content: |
  {% if is_state('sensor.number_of_lights_on', '0') %}
    All lights are off
  {% else %}
    {{ states('sensor.number_of_lights_on') }} lights are on.
  {% endif %}

No plugins required!

4 Likes