Search

Hi!

I have a problem with code blocks as output by the Markdown formatter. I searched the issue tracker, but found nothing related now, so I post it here first. Here first since this forum is running under Symphony (at least I guess so), so it is easier to demonstrate the problem. So a code block follows (hoping it will expose a similar behaviour to what I observed in 2.2.4, and in 2.4):

int main(){
    return 1;
}

The problem is that Markdown outputs the block as a <pre><code>blah</code></pre> (after some fast search in Markdown's code I found something the like, so I assume it starts out right), and then some HTML tidier decides it is untidy. By this it adds new lines and spaces after the starting <pre> tag and before the closing </pre>, breaking the intended layout of the code block.

Uh... What's the difference here? The clean Symphony 2.4 install produces the behavior, here it is not observable since as I see the code block is realized differently at HTML level (How so? - somebody silently fixed it somehow? In the Markdown extension's repo here I still see on line 1144 what I took as how Markdown would output the code block).

EDIT: Taking what I had seen in this page's source and doing my "homework" I put together an XSLT transform which formats my code blocks similarly. Meanwhile I got to see that as I fiddle with the XSLT whatever goes within the <pre> tag still gets formatted the usual way. Guess there is no dirty handler in there anywhere for <pre> (if that's even possible), so no tags may go in there. I smell a "wontfix" bug here.

This has to do with automatic indenting of the XSLT processor, which can be changed in the indent attribute of the (master) template's output element:

<xsl:output method="xml"
    doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    omit-xml-declaration="yes"
    encoding="UTF-8"
    indent="yes" />

If you use indent="yes" like above, you will see the phenomenon that you desribed. Most of us solve this issue by adding special CSS rules, e.g.:

pre {
    white-space: normal;
}

pre code {
    display: block;
    white-space: pre;
}

(This works because Markdown will always nest pre and code. It would obviously be bad if you have Markup with just pre tags.)

Well, I guess the solution used here is somewhat nicer (<div class="code-block"><pre>...</pre></div>), although it does not preserve a <code> tag. If I hadn't post this, I wouldn't have gone in this direction trying to solve my problem, before I was even thinking of how I could work it around with some dirty JavaScript (eek...).

Maybe (or certainly :) ) who did it here did a better job at it, but anyway here is what I did for my site. It is placed in the utilities/typography.xsl file (present on the default Symphony install as well):

<xsl:template match="pre[code]" mode="html">
    <xsl:element name="div">
        <xsl:attribute name="class">code-block</xsl:attribute>
        <xsl:element name="pre">
            <xsl:apply-templates select="code/* | code/@* | code/text()" mode="html"/>
        </xsl:element>
    </xsl:element>
</xsl:template>

The template match rule simply looks for <pre> tags which have <code> children. The end result is exactly what is observable here in this page's HTML source.

I see this Markdown problem a bit important as one starting with Symphony working with the default install will eventually run into it (just by attempting to output a code block with Markdown), and may have to spend some time finding a solution for it (for me this took about 2 years, well, I only thought the situation on my site icky enough to settle with that now at least I have to find out why this behaviour is present).

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details