I want to create an html and css file that shows an exact recreation of a Reddit comment. Is there an alternative to painstakingly recreating an element manually?
My final goal is to locally generate screenshots of Reddit comments with my own values for the username, number of upvotes, comment text, etc.
As far as I can tell, this problem boils down two tasks.
Task 1 - Aquire the HTML code This is easily achieved by right clicking an element, selecting 'inspect', copying the html and we're done.
Task 2 - Aquire the CSS code This is the part that caused problems. Whatever I tried it never resambled style of an actual Reddit comment.
CSS Approch 1 - Copy CSS file(s) I followed a tutorial on Youtube called How to clone a website where they simply copied the css file. There is about a dozen css files in my case which I could copy, but it would probably still not work when any of the styles are inherited from an ancestor of the comment element.
CSS Approach 2 - Copy Inspected Element Styles Copy and clean the CSS code that appears in the "Styles" tab when inspecting the Comment element. This didn't work at all and had hardly any effect on the appearance of the html file. Probably because a lot of the styling is inherited from an ancestor element.
CSS Approach 3 - Copy Computed Styles Did not solve the issue 'cause the computed styles in the Chrome Dev Tools don't seem to include the styling of the descendant elements.
CSS Approach 4 - Using JavaScript and Jquery
Found some Stackoverflow posts (post 1, post 2) that involved the JavaScript function window.getComputedStyle, but I couldn't find a way to use this to extract all the styles for the comment element and all its descendents.
Can someone tell me how I recreate a web element locally?
(Also sorry for the poor formatting. I rarely post.)
