Bug: Copy Code Button Generates Incorrectly Formatted README.md Content when copied while in the preview

[masonthedev]

Problem: When users click the "Copy" button while in the preview, it generates code that's formatted with indentations that displays code rather than the intended formatting when pasted in the README.md file

Steps to Reproduce:

1. Click the "copy" button in the preview view, code copies with proper formatting when clicked in the markdown view
2. Paste the copied code into a README.md file on GitHub.
3. You'll see how the code pastes differently than when its copied and pasted from the markdown view

Actual Behavior: The copied code has indentations that make it display code rather than the previewed format its supposed to display

Environment:

• Browser: Chrome 117.0.5938.132

Additional Information:

• There are no error messages displayed.
• I was able to manually adjust the formatting, and it displays properly if manually copied from the markdown view but it should work correctly by using the copy button provided
• The code starts to display weird at the socials section of the code.
• Below you can see an example of what I mean...

Hi My name is MasonTheDev

Subtitle displays corretly

The Long Description Section is displaying fine

• 🌍  I'm based in USA
• 🧠  I'm learning C
• 🤝  I'm open to collaborating on anything and everything
• ⚡  Coach by day... Programmer by night### Skills

              ### Socials
              
              
            <p align="left">
                  <a href="https://discord.com/users/PFranchi" target="_blank" rel="noreferrer">
                <picture>
                <source media="(prefers-color-scheme: dark)" srcset="undefined" />
                <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/discord.svg" />
                <img src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/discord.svg" width="32" height="32" />
                </picture>
                </a>
                  <a href="https://www.github.com/masonthedev" target="_blank" rel="noreferrer">
                <picture>
                <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/github-dark.svg" />
                <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/github.svg" />
                <img src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/github.svg" width="32" height="32" />
                </picture>
                </a>
                  <a href="https://www.linkedin.com/in/masonthedev" target="_blank" rel="noreferrer">
                <picture>
                <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/linkedin-dark.svg" />
                <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/linkedin.svg" />
                <img src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/linkedin.svg" width="32" height="32" />
                </picture>
                </a>
                  <a href="https://www.stackoverflow.com/users/22469991/masonthedev" target="_blank" rel="noreferrer">
                <picture>
                <source media="(prefers-color-scheme: dark)" srcset="undefined" />
                <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/stackoverflow.svg" />
                <img src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/stackoverflow.svg" width="32" height="32" />
                </picture>
                </a></p>### Badges<b>My GitHub Stats</b><a
                  href="http://www.github.com/masonthedev"><img src="https://github-readme-stats.vercel.app/api?username=masonthedev&show_icons=true&hide=&count_private=true&title_color=0891b2&text_color=ffffff&icon_color=0891b2&bg_color=1c1917&hide_border=true&show_icons=true" alt="masonthedev's GitHub stats" /></a><a
                  href="http://www.github.com/masonthedev"><img
              src="https://github-readme-streak-stats.herokuapp.com/?user=masonthedev&stroke=ffffff&background=1c1917&ring=0891b2&fire=0891b2&currStreakNum=ffffff&currStreakLabel=0891b2&sideNums=ffffff&sideLabels=ffffff&dates=ffffff&hide_border=true" /></a><a
                  href="http://www.github.com/masonthedev"><img src="https://github-readme-activity-graph.cyclic.app/graph?username=masonthedev&bg_color=1c1917&color=ffffff&line=0891b2&point=ffffff&area_color=1c1917&area=true&hide_border=true&custom_title=GitHub%20Commits%20Graph" alt="GitHub Commits Graph" /></a><a href="https://github.com/masonthedev" align="left"><img src="https://github-readme-stats.vercel.app/api/top-langs/?username=masonthedev&langs_count=10&title_color=0891b2&text_color=ffffff&icon_color=0891b2&bg_color=1c1917&hide_border=true&locale=en&custom_title=Top%20%Languages" alt="Top Languages" /></a>

[the-mihir]

I have thoroughly investigated this issue and confirmed it as a bug. The "Copy" button in the preview view incorrectly formats the copied code with extra indentations, which leads to it displaying as a code block instead of standard text when pasted into a README.md file on GitHub.

I've identified the root cause and successfully applied a fix on my local machine. My testing confirms that the fix resolves the formatting issue, allowing the code to display correctly in README.md.

I would appreciate it if you could assign this task to me, as I'm ready to push the fix and finalize this issue. Thank you!