Preview of MD file on Github

[lavalex]

Select Topic Area

Question

Body

When editing MD file on Github, if there are unsaved changes and I hit "preview", I get an error "There has been an error generating the preview.".

If changes are committed, then preview works. Any idea what can it be?

Thanx

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬

[subhash-kr0]

JavaScript/Browser Issue:

It could be a browser or JavaScript issue that's interfering with the Markdown preview. This might happen if there are extensions or scripts blocking the preview.

Solution: Try clearing the cache of your browser or opening GitHub in an incognito window. Additionally, try disabling any browser extensions that might interfere with the GitHub interface.

[RokeJulianLockhart]

This occurs to me on firefox-142.0-1.fc42.x86_64.rpm, even with firefox --safe-mode 'https://github.com/RokeJulianLockhart/RokeJulianLockhart/edit/main/'Metadata'%23.dir/'Description'%23.txt.Markdown':

• 1. ---
     output:
       html_document:
         number_sections: true
         toc: true
         toc_depth: 6
     ---
     
     <!--
     	<h4> Citation </h4>
     	<a href="https://github.com/microsoft/vscode/issues/216834#issue-2366955483:~:text=Lower%2Dcase%20d%20starting%20%3C!docType%3E%20HTML%20tag%20causes%20it%20to%20render%20in%20the%20Markdown%20previewer.">
     		GitHub Issue
     	</a>
     -->
     <!--
     	<h4> Citation </h4>
     	<a href="https://talk.commonmark.org/t/should-md-containing-html-tags-be-wrapped-in-html/4681?u=rokejulianlockhart#:~:text=Should%20MD%20containing%20HTML%20tags%20be%20wrapped%20in%20%60%3Chtml%3E%60?">
     		<code> talk.commonmark.org/t/should-md-containing-html-tags-be-wrapped-in-html/4681 </code>
     	</a>
     -->
     <!--
     	<h4> Information </h4>
     	<a href="https://gitlab.com/gitlab-org/gitlab/-/issues/462208#:~:text=GitLab%20Duo%20Chat-,Render%20disallowed%20HTML%20tags%20in%20the%20Markdown%20preview%20pane%20as%20code.,-Edit">
     		<code>gitlab.com/gitlab-org/gitlab/-/issues/462208</code> prevents this from being rendered in GitLab.
     	</a>
     -->
     
     # The GitHub "Profile `README`":
     
     <ol>
     	<li>
     		<h4> The Purpose Of This Account: </h4>
     		<p> I utilize this account solely to interact with the repositories hosted on this service. </p>
     	</li>
     	<li>
     		<h4> Utilisation Statistics: </h4>
     		<img src="https://repobeats.axiom.co/api/embed/1c1e164b76d18beb89c6166a0e6d07b1d7932cfa.svg">
     	</li>
     </ol>

  2. 

• 1. <svg fill="none" viewBox="0 0 600 300" width="600" height="300" xmlns="http://www.w3.org/2000/svg">
       <foreignObject width="100%" height="100%">
         <div xmlns="http://www.w3.org/1999/xhtml">
           <style>
             @keyframes hi  {
                 0% { transform: rotate( 0.0deg) }
                10% { transform: rotate(14.0deg) }
                20% { transform: rotate(-8.0deg) }
                30% { transform: rotate(14.0deg) }
                40% { transform: rotate(-4.0deg) }
                50% { transform: rotate(10.0deg) }
                60% { transform: rotate( 0.0deg) }
               100% { transform: rotate( 0.0deg) }
             }
     
             @keyframes gradient {
               0% {
                 background-position: 0% 50%;
               }
               50% {
                 background-position: 100% 50%;
               }
               100% {
                 background-position: 0% 50%;
               }
             }
     
             .container {
               --color-main: #5452ee;
               --color-primary: #e73c7e;
               --color-secondary: #23a6d5;
               --color-tertiary: #ffff;
     
               background: linear-gradient(-45deg, var(--color-main), var(--color-primary), var(--color-secondary), var(--color-tertiary));
               background-size: 400% 400%;
               animation: gradient 15s ease infinite;
     
               width: 100%;
               height: 300px;
     
               display: flex;
               justify-content: center;
               align-items: center;
               color: white;
     
               font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
             }
     
             .hi {
               animation: hi 1.5s linear -0.5s infinite;
               display: inline-block;
               transform-origin: 70% 70%;
             }
     
             @media (prefers-color-scheme: light) {
               .container {
                 --color-main: #F15BB5;
                 --color-primary: #24b0ef;
                 --color-secondary: #4526f6;
                 --color-tertiary: #f6f645;
               }
             }
     
             @media (prefers-reduced-motion) {
               .container {
                 animation: none;
               }
     
               .hi {
                 animation: none;
               }
             }
           </style>
     
           <div class="container">
             <h1>Hi there, my name is Nikola <div class="hi">👋</div></h1>
           </div>
         </div>
       </foreignObject>
     </svgg

     ¹

  2. 

Footnotes

1. reddit.com/r/github/comments/zkvi4b/comment/nalafl1 ↩

[RokeJulianLockhart]

@lavalex, although I've yet to confirm that this resolves #discussioncomment-14211524, a solution to this problem was, for me, to rename (without CSS) from .Markdown to .markdown. ¹

Footnotes

1. Patroniks-App/patroniksapp/blob/17e50931c8ecddc42f5782c35790cd1fda46063e/ReadMe.markdown?plain=0 ↩

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬

[wad11656]

I figured out what I was doing wrong--I was naming my file FOOBAR.MD instead of FOOBAR.md. It seems GitHub's Preview feature only works when the (.md) extension is lower-case...Even though once published, a capitalized (.MD) extension renders the file just fine. 🙄 🤦‍♂️ 😒 Please make the preview & published rendering behavior consistent with file extension casings.

[RokeJulianLockhart]

Please make the preview & published rendering behavior consistent with file extension casings.

@wad11656, I have filed github/markup/issues/2038.