Markdown Card - merge multiple lines together

Hi all,

is there a possinbility to split an output for a single line into multiple code-lines?

e.g. If I wanted to have the wifi-symbols of the below code in one line, I have to put the code below into one line. This makes it very difficult to read the code.
|{% if states ("binary_sensor.cupra_born_car_is_online")=="on"%}<font color="#4CAF50"><ha-icon icon="mdi:wifi"></ha-icon></font>{%else%} <font color="#DC143C"><ha-icon icon="mdi:wifi-off"></ha-icon></font>{%endif %} |{% if states ("binary_sensor.cupra_born_car_is_online")=="on"%}<font color="#4CAF50"><ha-icon icon="mdi:wifi"></ha-icon></font>{%else%} <font color="#DC143C"><ha-icon icon="mdi:wifi-off"></ha-icon></font>{%endif %}

output:
Screenshot 2024-02-15 155045

If I split the “code” into two lines the icons will be shown in two lines.

output:
Screenshot 2024-02-15 155328

How can I do this within the markdown card? Any ideas?

Spartacus

You’re defining a markdown table. The “|” delimits the columns, and line break are significant as they create rows.

Try with the 2nd line without this initial “|”. If that doesn’t work, try enclosing the full line with <span> / </span>

thanks for reply, but I think it is not working!

<span> Test, Test, 
Test  </span>

results in:
image

Me again,
does nobody has an idea how to put the icons next to each other and not under each other?

markdown-code:

{% if states ("binary_sensor.cupra_born_car_is_online")=="on"%}<font color="#4CAF50"><ha-icon icon="mdi:wifi"></ha-icon></font>
<font size="2">online</font>
{%else%}
 <font color="#DC143C"><ha-icon icon="mdi:wifi-off"></ha-icon></font>
 <font color="#7E7E7E" size="2">offline</font>
{%endif %}

{% if states ("binary_sensor.cupra_born_car_is_online")=="on"%}<font color="#4CAF50"><ha-icon icon="mdi:wifi"></ha-icon></font>
<font size="2">online</font>
{%else%}
 <font color="#DC143C"><ha-icon icon="mdi:wifi-off"></ha-icon></font>
 <font color="#7E7E7E" size="2">offline</font>
{%endif %}

Result:
Screenshot 2024-02-15 213302

When using {{ or {% there is a chance of adding unwanted line feeds into the output, which is due to the syntax of the YAML.
To avoid those unwanted line feeds YAML provide another set of brackets in the form of {{- and {%- and also their counterparts -}} and -%}
The first two will remove a line feed coming before the brackets, if such one exist.
The latter two will remove one coming after the brackets.

1 Like

Hm!

I do not really understand how this can be processed.

{{-{{states(“binary_sensor.cupra_born_car_is_online”)}}-}}

will result in an template error! Do you have an example?

Hi all,
let me describe my use case, maybe some has an idea how this can be work. I wanted to move the chips-buttons from above in line with the “Home button” The colour of the icon, the icon and the text below the icons should change depending on the state of the device. This is no problem by using the chips, but I wanted to integrate into the section above the cupra-logo. If there is a way to combine the markdown and the chips in a way that it looks like one card, it is also ok for me, but I haven’t found a way to get rid of the frames of chips and the black background between the chips. Maybe someone can help here to achieve the goal.

image

Like this:

{{- states(“binary_sensor.cupra_born_car_is_online”) -}}

@Spartacus Not sure if this what you were looking for as an example?

image

type: markdown
content: |-
  {% if is_state('light.pc_lights', 'on') %}   <font
    color="#4CAF50"><ha-icon icon="mdi:wifi"></ha-icon></font> online {% else %}<font
    color="#DC143C"><ha-icon icon="mdi:wifi-off"></ha-icon></font> offline {% endif %}{% if is_state('light.pc_lights', 'on') %}   <font
    color="#4CAF50"><ha-icon icon="mdi:wifi"></ha-icon></font> online {% else %}<font
    color="#DC143C"><ha-icon icon="mdi:wifi-off"></ha-icon></font> offline  {% endif %}

Thanks everybody for your help, but the text should be under the Symbole, because I need 5 symbols in one line.

I tried this code, but then the issue is, that the second icon will be in the same line as the engine… I gues I have to define variables for each entity-state and I have to configure zwo lines, first obe with the icons, second one with the text.

{%- if states ("binary_sensor.cupra_born_car_is_online")=="on" -%}
|||
|:---:|:---:|
|<font color="#4CAF50"><ha-icon icon="mdi:wifi"></ha-icon></font>
|<font color="#4CAF5">online </font>
{%- else -%}
|<font color="#DC143C"><ha-icon icon="mdi:wifi-off"></ha-icon></font>
{%- endif -%}
{%- if states ("binary_sensor.cupra_born_engine_status")=="on" -%}
|<font color="#4CAF50"><ha-icon icon="mdi:engine-outline"></ha-icon></font>
{%- else -%}
|<font color="#7E7E7E"><ha-icon icon="mdi:engine-off-outline"></ha-icon></font>
{%- endif -%}

{{'\n'}}

image

For future reference, it’s Jinja, not YAML.

Reference

Jinja - Whitespace control

many thanks for the link, but I think, that this will not run for me, but maybe this aproach can work, but I am too new with this stuff, but but perhaps this is an approach that leads to the goal…but why are these two blocks not in one line? Wjat is wrong?

{%- set wifi -%}
{%- if states ("binary_sensor.cupra_born_car_is_online")=="on" -%}
<font color="#4CAF50"><ha-icon icon="mdi:wifi"></ha-icon></font>
<font color="#4CAF5">online </font>
{%- else -%}
<font color="#DC143C"><ha-icon icon="mdi:wifi-off"></ha-icon></font>
<font color="#DC143C">offline </font>
{%- endif -%}
{%- endset -%}

{%- set engine -%}
{%- if states ("binary_sensor.cupra_born_engine_status")=="on" -%}
<font color="#4CAF50"><ha-icon icon="mdi:engine-outline"></ha-icon></font>
<font color="#4CAF5">ein </font>
{%- else -%}
<font color="#7E7E7E"><ha-icon icon="mdi:engine-off-outline"></ha-icon></font>
<font color="#7E7E7E">aus </font>
{%- endif -%}
{%- endset -%}

{{wifi}} {{engine}}

image

I suggest you use an HTML line-break tag <br/> to put the text under the icon.

Then use a table to put the two sets of icons and text next to each other. Include a blank column to provide some spacing between the two.

You can also reduce the template to this:

{%- set wifi -%}
{%- set (c, i, d) = iif(is_state("binary_sensor.cupra_born_car_is_online", "on"), ('#4CAF50', '', 'online'), ('#DC143C', '-off', 'offline')) -%}
<font color="{{c}}"><ha-icon icon="mdi:wifi{{i}}"></ha-icon></font><br/><font color="{{c}}">{{d}} </font>
{%- endset -%}
{%- set engine -%}
{%- set (c, i, d) = iif(is_state("binary_sensor.cupra_born_engine_status", "on"), ('#4CAF50', '', 'ein'), ('#7E7E7E', '-off', 'aus')) -%}
<font color="{{c}}"><ha-icon icon="mdi:engine{{i}}-outline"></ha-icon></font><br/><font color="{{c}}">{{d}} </font>
{%- endset -%}
||||
|:---:|---|:---:|
|{{ wifi }}||{{ engine }}|

Of course. My err. :slight_smile:

whow! You are a genius! it will probably take me 3 weeks to understand the code! :slight_smile:

Thank you! Thank you! Thank you!
I will be in touch!
Spartacus

Hello,

I think I understood what you did in the code. Coll idea. Programming is not really my thing. I’m a complete beginner. Do you also have a cool and simplified code idea for this use case?

Actually I did it with if and else. I tried to do it the same way, but it doesn’t seem to be effective.

if states("sensor.cupra_born_charging_state")=="charging"

icon: mdi:battery-charging-high
color: amber

if states("sensor.cupra_born_state_of_charge")<

<10, mdi:battery-10, red
<20, mdi:battery-20,amber
<30, mdi:battery-30,amber
<40, mdi:battery-40,amber
<50, mdi:battery-50,amber
<60, mdi:battery-60,amber
<70, mdi:battery-70,amber
<80, mdi:battery-80,green
<90, mdi:battery-90,green
<100, mdi:battery-100,green

You’re welcome!

Please consider marking my post above with the Solution tag. It will automatically place a check-mark next to the topic’s title which signals to other users that this topic has been resolved. This helps users find answers to similar questions.

For more information about the Solution tag, refer to guideline 21 in the FAQ.

@123 Nice!! I was going to go with the table option as well, but I couldn’t decipher exactly what the actual end design was. I appreciate streamlining the code as well!!

@Spartacus As suggessted, please mark this as a solution. It will definitely help folks down the road. Markdown cards are not as easy to code compared to other cards.

1 Like

I wasn’t sure if this post still refered to a Markdown.I am assuming it is this can aleast help you think about the logic.

{% set k =  states('sensor.bathroom_plug_sensor_illuminance_lux')| int (0) %}
      {% set d = states('switch.server_fan') %} 
      {% if (k >= 80 and d == 'on') %}
        <font color="green"><ha-icon icon="mdi:battery"></ha-icon></font> charged
      {% elif (k >= 10 and d == 'on') %} 
      <font color="amber"><ha-icon icon="mdi:battery"></ha-icon></font> alert
      {% elif (k <= 9 and d == 'on') %}
       <font color="red"><ha-icon icon="mdi:battery"></ha-icon></font> critical
      {% else %}
      <font color="green"><ha-icon icon="mdi:battery-charging-high"></ha-icon></font> charging
      {% endif %}

Thanks to everyone for the suggestions.

I have tried to implement this now, but I still fail at the battery symbol, which should also show the corresponding symbol depending on the state of charge, so

mdi:battery-0, mdi:battery-10 … mdi:battery-100

{%- set battery -%}
{%- set e = states('sensor.cupra_born_state_of_charge')|int -%} 
{%- set i = iif(is_state("binary_sensor.cupra_born_car_is_online", "charging"), ('battery-charging-high'), ('battery'))-%}
{%- if (e <= 10 ) -%} 
 {%- set c = ('#DC143C') -%}
{%- elif ( e > 10 and e < 70) -%} 
 {%- set c= ('#f1c232') -%}
{%- elif (e >= 70 ) -%} 
  {%- set c= ('#4CAF50') -%}
{%- endif -%}
<font color="{{c}}"><ha-icon icon="mdi:{{i}}"></ha-icon><br/><font color="{{c}}">{{e}}% </font>
{%- endset -%}

image