search

middleman / middleman-syntax

Code syntax highlighting plugin via Rouge for Middleman
https://middlemanapp.com
MIT License
179 stars 57 forks source link

Incorrect line indentation #24

Closed danielbayerlein closed 11 years ago

danielbayerlein commented 11 years ago

I have some problems with the line indentation. I use middleman-blog.

Gemfile

gem 'redcarpet', '~> 2.3.0'

config.rb

set :markdown_engine, :redcarpet
set :markdown, fenced_code_blocks: true, smartypants: true
activate :syntax,
         :linenos => 'inline',
         :anchorlinenos => true,
         :linenostart => 2

_syntax.css.erb

<%= Rouge::Themes::Github.render(scope: '.highlight') %>

example.html.markdown

```php
<?php
public function send($to, $from, $subject, $text) {
  $mail = new Zend_Mail();
  $mail->addTo($to)
       ->setFrom($from)
       ->setSubject($subject)
       ->setBodyText($text)
       ->send();
}
?>
\```

(Please ignore the backslash. It's only for GitHub.)

Result: github

Expected result:

<?php
public function send($to, $from, $subject, $text) {
  $mail = new Zend_Mail();
  $mail->addTo($to)
       ->setFrom($from)
       ->setSubject($subject)
       ->setBodyText($text)
       ->send();
}
?>

Have I done something wrong? Have an idea?

danielbayerlein commented 11 years ago

@jayferd Do you have an idea?

jneen commented 11 years ago

Do you have hard tabs in that code block? As far as I can remember Redcarpet turns those into 8 spaces. Can you gist the HTML output?

danielbayerlein commented 11 years ago

@jayferd

Do you have hard tabs in that code block? As far as I can remember Redcarpet turns those into 8 spaces.

No. I use soft tabs (2 spaces).

Can you gist the HTML output?

<!DOCTYPE html>
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset='utf-8'>
  <meta content='width=device-width' name='viewport'>
  <meta content='IE=edge' http-equiv='X-UA-Compatible'>
  <title>Blog</title>
  <script src="/javascripts/modernizr.js" type="text/javascript"></script>
  <link href="/stylesheets/app.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id='container'>
    <article class='row'>
      <div class='large-12 columns'>
        <h2 class='entry-title'>Syntax</h2>
        <div class='entry-content'>
          <pre class="highlight ruby"><span class="k">def </span><span class="nf">foo</span>
            <span class="nb">puts</span> <span class="s1">&#39;bar&#39;</span>
          <span class="k">end</span>
          </pre>
        </div>
      </div>
    </article>
  </div>
  <script src="/javascripts/app.js" type="text/javascript"></script>
</body>
jneen commented 11 years ago

Huh. Is there a postprocessor that is indenting this for you (like haml or jade)? The reason I ask is that the entire <pre> block is indented in the html for pretty-printing. It shows up as

          <pre class="highlight ruby"><span class="k">def </span><span class="nf">foo</span>
            <span class="nb">puts</span> <span class="s1">&#39;bar&#39;</span>
          <span class="k">end</span>
          </pre>

which is the exact output I get from the command-line, but indented 10 spaces.

danielbayerlein commented 11 years ago

@jayferd You're right - Haml is the problem. Thank you so much for your help!

The problem can be solved with the :preserve filter.

Example:

.entry-content
  = preserve do
    = yield
icambron commented 10 years ago

Are there any other ways to work around that? Unfortunately preserve seems to mess up my markdown in other ways: inlined HTML doesn't work right and it's touchy about HTML entities. Perhaps I can skip pretty printing?

bhollis commented 10 years ago

Check out https://github.com/middleman/middleman-syntax#haml

icambron commented 10 years ago

@bhollis Thanks Ben. I'm not sure that helps though, because it's actually a fenced Redcarpet code block in a Markdown file with a Haml layout (same as the OP, I think). To be clear the preserve fix does the trick, but since it's being applied to the whole Markdown file, it has some other disruptive effects.

In the end, I just converted my Haml layouts to Slim and the issue went away, so I'm square.

bhollis commented 10 years ago

You could also have turned off Haml indentation, as explained in https://github.com/middleman/middleman-syntax#indentation-problems

dlittle1 commented 7 years ago

you can also use ~ instead of the = when using haml http://haml.info/docs/yardoc/file.REFERENCE.html#tilde