How do you view the HTML source for a Confluence Cloud page?

[Kelvin Hill]

For the majority of web pages (including Atlassian Community pages), you can right-click in a browser and select View Page Source (or equivalent) to view the underlying HTML of the page. It isn't possible to do this in Confluence (probably because it side-loads the body content after the container page has loaded).

Many of the legacy editor macros that offered style and class fields (for manipulating PDF exports) have been omitted from the Fabric editor, so I need to identify the source tags, classes, and IDs in order to successfully customise my PDF exports.

Does anyone know a straightforward way to display the body source HTML of a Confluence Cloud page? I've tried using Chrome's Inspect function, but the classes and IDs revealed by it often fail to respond to entries made in the PDF export stylesheet.

[James Dellow · Accepted solution]

Have you looked at https://confluence.atlassian.com/confcloud/customize-exports-to-pdf-724764825.html ? This has a link to the default PDF style sheet, which should give you a starting point to identify the classes and IDs.

BTW Confluence content isn't stored as normal HTML, so inspecting via Chrome's developers tools is the way to view the rendered HTML version.

The old editor uses a special XHTML format called "Confluence Storage Format". However, the new editor is using a completely different JSON based approach for storing content, called "Atlassian Document Format ". But if you view those, they don't really contain any styling.

[Kelvin Hill]

@James Dellow I appreciate your suggestion, thanks. I also appreciate your explanation, thanks again.

Sadly, neither actually helps me, sorry. We have been customizing the PDF-export process for many years using the tools described in the link you shared. That all works fine and dandy, but the unresolved problem we face arising from the change to the Fabric editor is that we are unable to expose the HTML source that is sent to the PDF-export process. To be fair, the format in which the content is stored is immaterial. For the purposes of output (either to a browser or the PDF-export process), Confluence must present its content in standard HTML form that is has cross-browser support. It means that somewhere down the line its storage is converted into HTML tags with classes and IDs. It is that output we wish to access so we can manipulate it in the PDF-export stylesheet.

The PDF-export stylesheet is great for the entries included as standard and those we have been lucky enough to stumble upon, but what about if you want to customise the look of one of the new success-tip panels? While we have been able to identify a class associated with the DIV used to display it, when we customise that class in the stylesheet the change isn't reflected in the exported PDF, so something opaque is happening behind the scenes.

We will keep trying, of course.

[James Dellow]

If you already have this experience, you might want to try the developer community instead of here https://community.developer.atlassian.com/

However, have you explored what the API can output? i.e. https://developer.atlassian.com/cloud/confluence/rest/#api-api-contentbody-convert-to-post

Also maybe try https://atlaskit.atlassian.com/packages/editor/renderer for some clues? Scroll down to the example.

Failing that, I think you'll need to talk to an Atlassian insider to understand how the PDF exporter is currently working with the new editor and what styling is being used. You might be making an assumption about how how the content is being transformed before being handed to the PDF exporter.

[Kelvin Hill]

@James Dellow Great suggestions, thanks! I suspect the API is the way to go. I stumbled upon this suggestion in the Confluence Server questions: https://community.atlassian.com/t5/Confluence-questions/how-to-get-full-content-body-html-using-confluence-REST-API/qaq-p/710532

Thank you for your kind help.