Uploaded image for project: 'Jira Data Center'
  1. Jira Data Center
  2. JRASERVER-78619

Code block is not rendering in Dark Theme

XMLWordPrintable

      Issue Summary

      The text formatting for code blocks is not rendering properly in Dark Theme. 
      It works as expected in Original/Light Theme. 

      Steps to Reproduce

      1. Using the formatting provided in this article; 
        {code:xml}
    <test>
        <another tag="attribute"/>
    </test>
      2. Open a Jira issue and type the code block on the Description or Comment field;

      Expected Results

      The code block should be rendered properly like this (this is from Light Theme);

      Actual Results

      In Dark Theme, the code block shows like this;

      Workaround

      A workaround is to add custom CSS rule through the announcement banner;

      1. Configure announcement banner with the following custom CSS rule; 
        <style>
.code-tag {
   color: var(--ds-text-accent-teal, #000091);
}
</style>

      2. Add the code block in either Description/Comment field; 
        {code:xml}
    <test>
        <another tag="attribute"/>
    </test>
{code}

      3. The result would be like this;

       

        1. image-2025-02-20-14-35-29-971.png
          image-2025-02-20-14-35-29-971.png
          165 kB
        2. image-2025-02-20-14-37-22-717.png
          image-2025-02-20-14-37-22-717.png
          20 kB
        3. image-2025-02-20-14-38-40-317.png
          image-2025-02-20-14-38-40-317.png
          165 kB
        4. screenshot-1.png
          screenshot-1.png
          119 kB
        5. screenshot-2.png
          screenshot-2.png
          34 kB
        6. screenshot-3.png
          screenshot-3.png
          113 kB

            [JRASERVER-78619] Code block is not rendering in Dark Theme

            Thomas Andres added a comment -

            Slightly improved workaround for the banner:

            <style>
.code-tag {
   color: var(--ds-text-accent-teal, #000091);
}
#announcement-banner {
    display: none;
}
</style>

            This avoids adding an empty  banner line.

            Thomas Andres added a comment - Slightly improved workaround for the banner: <style> .code-tag {    color: var (--ds-text-accent-teal, #000091); } #announcement-banner { display: none; } </style> This avoids adding an empty  banner line.

              Unassigned Unassigned
              02a6ae09c2cc Cecille Maquito
              Affected customers:
              2 This affects my team
              Watchers:
              4 Start watching this issue

                Created:
                Updated: