Refactor SCSS and HTML templates for improved code snippet presentation

[payaljhamta]

Added 'Click to Copy' functionality for command-line code blocks using existing clippify integration

Closes: #1276

Refer :

[MHLut]

@payaljhamta Pleaso do not randomly tag people into issues. It is incredibly rude.

I appeciate you want to draw attention to your ticket, but there are hundreds of people who want the same thing for their tickets. Patience is a virtue.

With all due respect, random tags make people less inclined to help, which is the opposite of what you are trying to achieve here.

[bmispelon]

Hi and thanks for giving a go at this issue.

I've left a comment on the changes in the SCSS file, I think a different approach is needed.
Overall I'm also not super convinced about this approach in general: I don't like that we need to add an extra <div> to support this, and that we're using the old snippet-filename class which was made for really old versions of the Django documentation.

It might be worth waiting until #1968 is finished too, since that's likely to interfere with the changes in this PR.

[bmispelon]

As mentioned in the comment above, these styles are used for old versions of the documentation, see for example https://docs.djangoproject.com/en/1.11/intro/tutorial01/#write-your-first-view

Commenting this out will break the styling of those older documents, so this approach doesn't work.