to support code block better

JohnnyFee commented 10 years ago

Just like the code blocks in this article http://scotch.io/tutorials/javascript/learn-to-use-the-new-router-in-expressjs-4, the output for these is abjective. As I know, html2markdown can process them expertly. Are you plan to improve it or maybe I ignore anything?

leeoniya commented 10 years ago

the syntax coloring script there adds a lot of <span> and <div> tags into the DOM. try:

var opts = {
    span_tags:  false,
    div_tags:   false,
};

var reMarker = new reMarked(opts);

var markdown = reMarker.render(document.getElementById("myCode"));

JohnnyFee commented 10 years ago

I've tried that way, but the result is not satisfactory.

The html source:

<!doctype html>
<html>
    <head>
        <link href="styles/main.css" rel="stylesheet">
        <!-- build:js scripts/options.js -->
        <script src="scripts/options.js"></script>
        <script type="text/javascript" src="scripts/reMarked.js"></script>
        <!-- endbuild -->
    </head>
    <body>

<pre id="myCode"><code>
<span>-</span> package<span >.</span>json <span  spellcheck="true">// set up our node packages
</span><span >-</span> server<span >.</span>js <span  spellcheck="true">// set up our app and build routes
</span></code>
</pre>
        <script type="text/javascript">
             var reMarker = new reMarked({
                 h1_setext: false, // underline h1 headers
                 h2_setext: false, // underline h2 headers
                 h_atx_suf: true,
                 span_tags: false,
                 div_tags: false
             });

             var markdown = reMarker.render(document.getElementById("myCode"));
             console.info(markdown);
        </script>

    </body>
</html>

The output is:

`- package.json // set up our node packages- server.js // set up our app and build routes`

It's not a code block, but just a code.

leeoniya commented 10 years ago

yep, there were some issues. thanks!

gfm_code was disabled by default.
white-space was getting trimmed between inline elements inside <code> tags because they were parsed the same as other block elements.

i switched the way code blocks are processed which should make them work much better. you don't need to use span_tags or div_tags settings for code blocks any more, but these are still useful if you want to get clean markdown in other places.

hopefully fixed by 13981d3b9e6e4f7d5889ed84957ebbaac81cf488

JohnnyFee commented 10 years ago

I test my case above again after pull, but it seems not not work expectly. With no options:

var reMarker = new reMarked();

or write the option explicitly:

var reMarker = new reMarked({
    gfm_code: true,
    trim_code:  true
});

The outputs are the same:

`<span>-</span> package<span>.</span>json <span spellcheck="true">// set up our node packages</span><span>-</span> server<span>.</span>js <span spellcheck="true">// set up our app and build routes</span>`

leeoniya commented 10 years ago

ah, sorry. if you do the actual <pre> node, it doesn't work, but if you do the parent, like document.body, then it works.

see: http://jsfiddle.net/H66CK/

i will try to fix this soon.

leeoniya commented 10 years ago

try it now.

also, gfm_code and trim_code are now enabled by default and not necessary unless you want to disable them.

JohnnyFee commented 10 years ago

Yes, the output is normal, but the pre element in the dom is hidden by the reMarker.render(myCode).

leeoniya commented 10 years ago

sorry. should be fixed now. i need to be more careful :)

leeoniya / reMarked.js

to support code block better #42