russross / blackfriday

Blackfriday: a markdown processor for Go
Other
5.45k stars 602 forks source link

Fence code blocks and nested lists inconsistencies #536

Open askmrsinh opened 5 years ago

askmrsinh commented 5 years ago

I am working on a Hugo project that uses blackfriday internally to render its content. This is the nested list that I am using:

## Project Setup and Run
1. Importing the project into Eclipse
   - Open Eclipse *-> Click* File *-> Click* Import *-> Click* General *-> Click* Existing Projects into Workspace. Follow on screen instructions.
   - Make sure all JARs and class folders on the build path are present for the project.
2. Set API Keys
   - Sign up for 
      - Google Maps JavaScript API key [here](https://accounts.google.com/ServiceLogin?passive=true&continue=https%3A%2F%2Fdevelopers.google.com%2Fmaps%2Fdocumentation%2Fjavascript%2F&service=ahsid#identifier)
      - Weather API- OpenWeatherMap key [here](https://home.openweathermap.org/users/sign_up)
      - Dark Sky API key [here](https://darksky.net/dev/register)
   - Set the above keys in `wetter\WebContent\resources\includes\api.jsp` file; lines 4,5,6.
     ```Java
     String api_key_GoogleMapsJavaScript   = "INSERT_YOUR_KEY";
     String api_key_OpenWeatherMap         = "INSERT_YOUR_KEY";
     String api_key_DarkSky                = "INSERT_YOUR_KEY";
  1. Optionally set Proxy ie. http.proxyHost && http.proxyPort in files:
    • wetter\WebContent\resources\includes\api.jsp; line 24
  2. Run the project on Apache Tomcat server.
    
    I can not get this to render consistently due to the below reasons.

Fenced blocks within nested lists appear as inline code (when not preceded by empty new line) The above sample produces this: image

The only way to get the code block to render properly is to add a new blank line before the fenced code (and further intent it) which gives this: image

But this hack leads to another issue. The addition of the new line before the fence code in a list, surrounds the corresponding and all subsequent bullet contents in paragraph tags ie. <li><p>...</p></li> (even those which were earlier simply rendered as <li>...</li> ). Similar behaviour was also reported at https://github.com/gohugoio/hugo/issues/5291.

This becomes prominent by the extra paragraph padding at the top level lists (2. Set API Keys...., 3. Optionally set Proxy.... ) in the screenshot above. In all likelihood, I can at least made things look consistent by adding some extra css like

li > p {
  padding:0;
  margin:0
}

However, this doesn't address the underlying issue directly:

  1. the need for fenced code block to be preceded by a new line in a list
  2. stray addition of paragraph tags where not required

Expected Output:

<h2>Project Setup and Run</h2>
<ol>
  <li>
    Importing the project into Eclipse
    <ul>
      <li>Open Eclipse <em>-&gt; Click</em> File <em>-&gt; Click</em> Import <em>-&gt; Click</em> General <em>-&gt; Click</em> Existing Projects into Workspace. Follow on screen instructions.</li>
      <li>Make sure all JARs and class folders on the build path are present for the project.</li>
    </ul>
  </li>
  <li>
    Set API Keys
    <ul>
      <li>
        Sign up for
        <ul>
          <li>Google Maps JavaScript API key <a href="https://accounts.google.com/ServiceLogin?passive=true&amp;continue=https%3A%2F%2Fdevelopers.google.com%2Fmaps%2Fdocumentation%2Fjavascript%2F&amp;service=ahsid#identifier">here</a></li>
          <li>Weather API- OpenWeatherMap key <a href="https://home.openweathermap.org/users/sign_up">here</a></li>
          <li>Dark Sky API key <a href="https://darksky.net/dev/register">here</a></li>
        </ul>
      </li>
      <li>
        Set the above keys in <code>wetter\WebContent\resources\includes\api.jsp</code> file; lines 4,5,6.
        <pre><code class="language-Java">String api_key_GoogleMapsJavaScript   = &quot;INSERT_YOUR_KEY&quot;;
String api_key_OpenWeatherMap         = &quot;INSERT_YOUR_KEY&quot;;
String api_key_DarkSky                = &quot;INSERT_YOUR_KEY&quot;;
</code></pre>
      </li>
    </ul>
  </li>
  <li>
    Optionally set Proxy ie. <code>http.proxyHost</code> &amp;&amp; <code>http.proxyPort</code> in files:
    <ul>
      <li><code>wetter\WebContent\resources\includes\api.jsp</code>; line 24</li>
    </ul>
  </li>
  <li>Run the project on Apache Tomcat server.</li>
</ol>
fleeto commented 5 years ago

I am using Hugo too, I think that's the problem: https://github.com/russross/blackfriday/blob/05f3235734ad95d0016f6a23902f06461fcf567a/block.go#L652

~~~syntax will return (0, ""),and it should be (0, "~~~")

heavywatal commented 5 years ago

+1. But this issue has already been reported in #484 and #526. An attempt to fix it seems to be done in #532. Can you review the PR and give it a comment, @fleeto?