Renderedbody Styling

Hello Devs ,
So i’m working on a project where i need to get the comments and re-render them with the same styling ,
Tho this is the comment

and this is what im getting

is there any way to get the same styling or get the styling classes code used by atlassian ?

this is the log snippet

"<div class='table-wrap'>
<table class='confluenceTable'><tbody>
<tr>
<th class='confluenceTh'><b>12</b></th>
<th class='confluenceTh'><b>test</b></th>
<th class='confluenceTh'><b>test</b></th>
</tr>
<tr>
<td class='confluenceTd'>abc</td>
<td class='confluenceTd'>def</td>
<td class='confluenceTd'>ghi</td>
</tr>
<tr>
<td class='confluenceTd'>jkl</td>
<td class='confluenceTd'>mno</td>
<td class='confluenceTd'>pqr</td>
</tr>
</tbody></table>
</div>


<ul>
	<li><font color="#bf2600">random</font></li>
	<li></li>
	<li><font color="#36b37e"><em>lorem</em></font> <b>esprom</b></li>
	<li>☺️</li>
	<li><a href="https://haithem-ghattas.atlassian.net/secure/ViewProfile.jspa?accountId=5f79edc3ac3a2d006ffeb357" class="user-hover" rel="5f79edc3ac3a2d006ffeb357" data-account-id="5f79edc3ac3a2d006ffeb357" accountid="5f79edc3ac3a2d006ffeb357" rel="noreferrer">Haithem GHATTAS</a></li>
	<li><div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
<pre class="code-javascript">some code
<span class="code-keyword">import</span> randomm
</pre>
</div></div></li>
</ul>


<div class="panel" style="background-color: #fffae6;border-width: 1px;"><div class="panelContent" style="background-color: #fffae6;">
<p>test test</p>
</div></div>

<p>TESTING WITH EVERYTHING</p>"

this is my code snippet

<Comment
                        avatar={<Avatar name={comment.displayName} src={comment.avatarUrls["48x48"]} />}
                        time={<CommentTime>{formatDate(comment.created)}</CommentTime>}
                        content={<div dangerouslySetInnerHTML={{ __html: comment.body }} />}
                        actions={[
                            <CommentAction>Reply</CommentAction>,
                            <CommentAction>Edit</CommentAction>,
                            <CommentAction>Like</CommentAction>,
                        ]}
                    />

Hey @GhattasHaithem,

I’m wondering if you can provide a bit more context?

From what I gather, you want to take the data within a comment on a Confluence page and re-produce with with the same styling within a Forge UI Kit app? Is this as a Confluence page macro or something else? It’s not clear from your screenshot or code samples where it’s being rendered.

1 Like

Hello @mpaisley ,
thanks for your reply ,
Well i want to take the data within a comment on Jira ticket and re-produce with with the same styling within a Forge custom UI app …
found a solution with using @atlaskit/renderer and i’m facing other problems like Media not getting rendered (i cant see the images or files all i can see is a spinner ) do you have any solution for that ?
Thank you ,
haithem .