How to see the hidden formats that get copied when copying HTML content?

Question

Is there a way to copy styled HTML and get the associated format that Chrome sees? For example, if I copy the title of this question, I paste it into the text editor that my newsletter provider (MailChimp) gives me, and I switch to HTML mode, I can see that what actually gets copied is:

<h1 itemprop="name" style="margin: 0px 0px 7px; padding: 0px; border: 0px; font-size: 23.3333339691162px; vertical-align: baseline; font-family: 'Trebuchet MS', 'Liberation Sans', 'DejaVu Sans', sans-serif; line-height: 1.3; background: rgb(255, 255, 255);">
    <a href="http://stackoverflow.com/questions/24907135/error-cannot-read-property-of-undefined" class="question-hyperlink" style="margin: 0px; padding: 0px; border: 0px; font-size: 23.3333339691162px; vertical-align: baseline; color: rgb(0, 0, 0); text-decoration: none; cursor: pointer; background: transparent;">
        How to see the hidden formats that get copied when copying HTML content?
    </a>
</h1>

Is there an easy way to extract this information using a dedicated tool (not my newsletter provider)?

EDIT: Just to make it clear, if I inspect the title header and I click on Copy, I get the HTML without the embedded CSS:

<h1 itemprop="name">
    <a href="/questions/24907376/how-to-see-the-hidden-formats-that-get-copied-when-copying-html-content" class="question-hyperlink">How to see the hidden formats that get copied when  copying HTML content?
    </a>
</h1>

Answer 1

What you are trying to do is export standalone HTML. Your question is not entirely clear, but I'm assuming you're trying to retrieve it from a page under your control, and you can thus run Javascript.

This means that, at runtime, you need to determine the effective 'computed' styles for every element, and apply them to the element itself. After that you can simply read and process the innerHTML of the containing element to retrieve your standalone content.

Read the excellent answers on this question to see how to retrieve the runtime calculated style of every element. Then apply each of them explicitly to the element itself through its style property. The innerHTML property will reflect these changes in the returned value.

If the webpage you're trying to do this on is not under your control, you could always inject the same code using for example GreaseMonkey for Firefox or TamperMonkey for Chrome. This would make it enough of a 'universal tool'.