Geshi Tags / Fenced Blocks

jcrawford commented 10 years ago

Is there any way to use fenced blocks rather than Geshi with PieCrust?

I would love to be able to do

```php
content here 
```

rather than

{% geshi 'php' %}

{% endgeshi %}

The reason being is most Markdown preview/editors understand the fenced blocks and not the geshi tags.

ludovicchabant commented 10 years ago

There's no way right now because Twig doesn't support this kind of syntax out of the box, I think.... but there's always a way :) I'll look into it.

jcrawford commented 10 years ago

PieCrust could parse the files prior to sending them through geshi and convert the ```php to {% geshi 'php' %} Granted at that point there would be no way to specify extra classes such as geshi allows but I love the fenced code blocks and think that should be supported.

ludovicchabant commented 10 years ago

There's an open pull request on PHP-Markdown that adds support for 3-backtick fenced code blocks. When that's integrated, I'll make a pull request that adds the ability to define a callback for supporting the language part.

If you don't need syntax highlighting, you could use the tilde fenced code block syntax, which has existed for a while.

jmcastagnetto commented 10 years ago

IIRC, PHPMarkdown supports fenced code, just not wirth backticks but with "~", e.g.:

~~~php
function bar($val) {
    return val * 2;
}
$foo = 21;
$ans = bar($foo);
echo "The answer is $ans";
~~~

Generates some similar to the rendering in this editor:


function bar($val) {
    return val * 2;
}

$foo = 21;
$ans = bar($foo);

echo "The answer is $ans";

ludovicchabant commented 10 years ago

Yeah that's what I was talking about about the "tilde fenced code block". However, I don't think it supports syntax highlighting, does it?

jmcastagnetto commented 10 years ago

Indeed because this is not explicitely using Geshi, then it does no have highlighting bult-in.

What I was aiming at (implicitely) is that if your code from phpmarkdown extra has already the appropriate classes, you then just need to add a line (or more) using one of the many CSS and or JS libs to do syntax highlight.

In the example below, the markdown to HTML conversion was made using: http://michelf.ca/projects/php-markdown/dingus/, and the highlight will be done with: http://google-code-prettify.googlecode.com

The original markdown:

    # A test

    ~~~ {.language-php .prettyprint .linenums:10}
    function bar($val) {
        return val * 2;
    }

    $foo = 21;
    $ans = bar($foo);
    echo "The answer is $ans";
    ~~~

Generates the HTML fragment:


<h1>A test</h1>

<pre><code class="language-php prettyprint linenums:10">function bar($val) {
    return val * 2;
}

$foo = 21;
$ans = bar($foo);

echo "The answer is $ans";
</code></pre>

Finally adding the bits for highlighting in a full html doc:


<!DOCTYPE html>                                                                 
<html lang="en">                                                                   
<head>                                                                          
  <title>Test of prettify + output of phpmarkdown extra</title>                    
  <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
</head>                                                                            
<body>                                                                             
<h1>a test</h1>                                                                    
<pre><code class="language-php prettyprint linenums:10">function bar($val) {       
    return val * 2;                                                                
}                                                                                  

$foo = 21;                                                                      
$ans = bar($foo);                                                               

echo "The answer is $ans";                                                      
</code></pre>                                                                      
</body>                                                                            
</html>

The HTML should produce something along the lines of:

test of prettify and phpmarkdown extra

jmcastagnetto commented 10 years ago

BTW, the markdown above, when interpreted by pandoc, generates:

<h1 id="a-test">A test</h1>
<pre class="language-php prettyprint linenums:10"><code>function bar($val) {
    return val * 2;
}

$foo = 21;
$ans = bar($foo);
echo &quot;The answer is $ans&quot;;</code></pre>

which when highlighted with the JS lib above, works in a similar fashion, except for the box surrounding the code.

If you want to replicate that behavior in PHPMarkdown Extra, then you need to configure code_attr_on_pre to true

I guess this can be an addition to the initialize() method, I can make PR if you want a general patch for that.

jmcastagnetto commented 10 years ago

I think that issue #130 is a solution for this request, isn't it?

ludovicchabant commented 9 years ago

Totally overdue closing of this request :)

Note that fenced code blocks work in PieCrust 2, along with a bunch of stuff like Github's language specifiers. PHPMarkdown options may not work exactly (since it's a different implementation) but equivalent options surely exist.

ludovicchabant / PieCrust

Geshi Tags / Fenced Blocks #128