Browse Source

Markdown.pl: tweak code block output again

Originally code blocks simply output this:

  <pre><code>the code block text></code></pre>

However that sometimes led to unsatisfying formatting with
some browsers (especially text ones) and so that was ultimately
changed to this:

  <div><dl></dl><pre><code>code block text</code></pre></div>

The div then additionally has a class to facilitate formatting
with a style sheet.  The empty <dl></dl> causes agents that would
otherwise make a poor formatting choice to do "the right thing"(tm)
instead.  However, the "<dl></dl>" kludge is unsatisfying for a
number of reasons.

Instead output this:

  <div><pre></pre><pre><code>code block text</code></pre></div>

where the first div still has a class to facilitate formatting via
a style sheet, but the replacement "<pre></pre>" block has an
embedded style and is actually emitted like so:

  <pre style="display:none"></pre>

While this is still a kludge, it's much more satisfying because:

1. The same element type is being used to force those recalictrant
   text agents to do "the right thing"(tm).

2. The explict style="display:none" attribute completely protects
   properly behaving agents from any unwanted side-effects from
   the extra "<pre></pre>" tag pair.

Together with this change, the --stub stylesheet has also been
modified to use a more universally (i.e. page background is not
white) compatible styling for the code blocks themselves.

Signed-off-by: Kyle J. McKay <mackyle@gmail.com>
master
Kyle J. McKay 7 years ago
parent
commit
d332fc3fd4
  1. 19
      Markdown.pl

19
Markdown.pl

@ -493,7 +493,7 @@ sub _HashBTCodeBlocks {
$codeblock =~ s/\A\n+//; # trim leading newlines
$codeblock =~ s/\s+\z//; # trim trailing whitespace
$codeblock = _EncodeCode($codeblock); # or run highlighter here
$codeblock = "<div class=\"$opt{style_prefix}code-bt\"><dl></dl><pre><code>"
$codeblock = "<div class=\"$opt{style_prefix}code-bt\"><pre style=\"display:none\"></pre><pre><code>"
. $codeblock . "\n</code></pre></div>";
my $key = block_id($codeblock);
@ -1574,7 +1574,7 @@ sub _DoCodeBlocks {
$codeblock =~ s/\A\n+//; # trim leading newlines
$codeblock =~ s/\s+\z//; # trim trailing whitespace
my $result = "<div class=\"$opt{style_prefix}code\"><dl></dl><pre><code>"
my $result = "<div class=\"$opt{style_prefix}code\"><pre style=\"display:none\"></pre><pre><code>"
. $codeblock . "\n</code></pre></div>";
my $key = block_id($result);
$g_code_blocks{$key} = $result;
@ -1990,12 +1990,19 @@ BEGIN {
*/
div.%(base)code-bt > pre, div.%(base)code > pre {
margin: 0 3ex;
padding: 1ex;
background-color: #eee;
margin: 0;
padding: 0;
overflow: auto;
}
div.%(base)code-bt > pre > code, div.%(base)code > pre > code {
display: inline-block;
margin: 0;
padding: 0.5em 0;
border-top: thin dotted;
border-bottom: thin dotted;
}
ol.%(base)ol {
counter-reset: %(base)item;
}
@ -2322,7 +2329,7 @@ Z<> See the F<README> file for detailed release notes for this version.
=item Copyright (C) 2003-2004 John Gruber
=item Copyright (C) 2015,2016 Kyle J. McKay
=item Copyright (C) 2015-2017 Kyle J. McKay
=item All rights reserved.

Loading…
Cancel
Save