joeyespo / grip

Preview GitHub README.md files locally before committing them.
MIT License
6.45k stars 423 forks source link

Unusual output when rendering to HTML #246

Closed DavidAntliff closed 6 years ago

DavidAntliff commented 6 years ago

I have a simple markdown document:

# Test

It renders like this in both Chrome and Firefox:

image

Any idea what is causing this? It's only just started happening.

The source HTML looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>test.md - Grip</title>
  <link rel="icon" href="/__/grip/static/favicon.ico" />
  <link rel="stylesheet" href="/__/grip/asset/site-877643c520258c4fa15ac8d1664d84efd0e3db56f5e544ccac58da0e50489904.css" />
  <link rel="stylesheet" href="/__/grip/asset/github-a1f1041276ec59b7ad51bdbd35d2d73f15f99aebe2686a60e9cd9f705b57d220.css" />
  <link rel="stylesheet" href="/__/grip/asset/frameworks-bedfc518345498ab3204d330c1727cde7e733526a09cd7df6867f6a231565091.css" />
  <link rel="stylesheet" href="/__/grip/static/octicons/octicons.css" />
  <style>
    /* Page tweaks */
    .preview-page {
      margin-top: 64px;
    }
    /* User-content tweaks */
    .timeline-comment-wrapper > .timeline-comment:after,
    .timeline-comment-wrapper > .timeline-comment:before {
      content: none;
    }
    /* User-content overrides */
    .discussion-timeline.wide {
      width: 920px;
    }
  </style>
</head>
<body>
  <div class="page">
    <div id="preview-page" class="preview-page" data-autorefresh-url="/__/grip/refresh/">

      <div role="main" class="main-content">
        <div class="container new-discussion-timeline experiment-repo-nav">
          <div class="repository-content">
            <div id="readme" class="readme boxed-group clearfix announce instapaper_body md">

                <h3>
                  <span class="octicon octicon-book"></span>
                  test.md
                </h3>

              <article class="markdown-body entry-content" itemprop="text" id="grip-content">
                <h1>
<a id="user-content-test" class="anchor" href="#test" aria-hidden="true"><span>{:"aria-hidden"=&gt;"true", :class=&gt;"octicon octicon-link"}</span></a>Test</h1>

              </article>
            </div>
          </div>
        </div>
      </div>

  </div>
  <div>&nbsp;</div>
  </div><script>
    function showCanonicalImages() {
      var images = document.getElementsByTagName('img');
      if (!images) {
        return;
      }
      for (var index = 0; index < images.length; index++) {
        var image = images[index];
        if (image.getAttribute('data-canonical-src') && image.src !== image.getAttribute('data-canonical-src')) {
          image.src = image.getAttribute('data-canonical-src');
        }
      }
    }

    function scrollToHash() {
      if (location.hash && !document.querySelector(':target')) {
        var element = document.getElementById('user-content-' + location.hash.slice(1));
        if (element) {
           element.scrollIntoView();
        }
      }
    }

    function autorefreshContent(eventSourceUrl) {
      var initialTitle = document.title;
      var contentElement = document.getElementById('grip-content');
      var source = new EventSource(eventSourceUrl);
      var isRendering = false;

      source.onmessage = function(ev) {
        var msg = JSON.parse(ev.data);
        if (msg.updating) {
          isRendering = true;
          document.title = '(Rendering) ' + document.title;
        } else {
          isRendering = false;
          document.title = initialTitle;
          contentElement.innerHTML = msg.content;
          showCanonicalImages();
        }
      }

      source.onerror = function(e) {
        if (e.readyState === EventSource.CLOSED && isRendering) {
          isRendering = false;
          document.title = initialTitle;
        }
      }
    }

    window.onhashchange = function() {
      scrollToHash();
    }

    window.onload = function() {
      scrollToHash();
    }

    showCanonicalImages();

    var autorefreshUrl = document.getElementById('preview-page').getAttribute('data-autorefresh-url');
    if (autorefreshUrl) {
      autorefreshContent(autorefreshUrl);
    }
  </script>
</body>
</html>
joeyespo commented 6 years ago

Duplicate of #244. Be sure to upgrade with pip install --upgrade grip. Thanks!

DavidAntliff commented 6 years ago

Ah, sorry, I searched open issues for "aria-hidden" and got no hits, so didn't realise there was a dup.

Upgrade has fixed the issue. Thank you.

joeyespo commented 6 years ago

No problem! This issue will likely contain words that other people will search for, so thanks for taking the time to open it when you didn't see any results 😃