Show code in html css

How to display code snippets in HTML?

Indie maker with a passion for SEO working on web projects. Ex-mobile dev-agency owner. Now, helping early stage founders turn their side projects into businesses.

You want your code snippets to look ‘pretty,’ but do you know how to display them properly in HTML and make them awesome? Do you want to display formatted code on your custom or WordPress blogs but don’t know the best resources, plugins, or libraries to do it? In this tutorial, I will share with you the possible easiest ways to display code snippets in HTML, along with examples.

Why do you need to display code snippets in HTML?

Showcasing code in HTML can be beneficial if you want to share your programming knowledge with your audience in the shape of code snippets. Let’s say you have a blog and you’re writing a technical guide with some code examples. You want to demonstrate parts of this code in your article with the proper format and styling. In that case, you will need a way to present them.

Normally, when you try to indent the text inside HTML tags. It ignores the line breaks and renders single lines. But, in

(preformatted) tag, spaces and line breaks aren't ignored. Just look into the simple text example below: You can easily print the code with the same approach. Just place it inside 
tag, and that's it. There is another tag combined with 
tag, which gives more semantic meaning to search engines. The HTML code tag. tag is used for the piece of computer code. Usually, you include this tag inside of the 
tag to tell a browser, and Google that’s a block of code you want to display, not to render. Here is an example:
 
Encode Reserved tags into HTML entities
 
What if you want to display the HTML code block using the 
 
tag? Looking at the example below, you will see that the entered HTML code has been rendered but not displayed because of reserved characters. To fix this issue, you will need to use HTML entities. Like this: Now, don't get yourself confused. There are tools available to convert HTML tags into HTML entities to make your life easier. For example, you can use Text HTML entities Convertor or HTML Encode.
 
Syntax highlighting of code blocks
 
And if you're using WordPress, you can use the plugin Prismatic by Jeff Starr.
 
Using PrismJS to style your code block in 3 easy steps
 
 
Download the JavaScript and CSS files of Prismjs or use CDN
 
Now, link the CSS files inside the head section and the JavaScript file at the bottom
 
Use the pre-defined class names in tag
 
 
You can use PrismJS for different languages like CSS, JavaScript, Go, PHP, etc.
 
Colors schemes vary on the style or theme you choose, like:
 
There are endless customizations that you can do to highlight your code blocks.
 
Some useful List of plugins are:
 
 
Line Numbers
 
Line Highlight
 
Show Language
 
Command Line
 
Highlight Keywords
 
and much more
 
 
By default, plugins are not included in downloaded files.
 
Before downloading the files, you must enable or select your desired plugins and languages.
 
Adding line numbers to code block:
 
Or copy to clipboard option:
 
Conclusion:
 
So far, you've learned about sharing code snippets on a website by displaying them through preformatted and computer code tags.
 
You have also learned about JS libraries and the WordPress plugin to integrate into your blog or website.
 
But now, what if you want to share useful code snippets with the team or friends in a more modern and smarter way?
 
Here comes the new code snippets manager by Codiga. It allows you to add, manage, and share code snippets within your chosen IDE. We provide plugins for VS Code, IntelliJ/Jetbrains and Google Chrome.
 
FAQs:
 
What is a code snippet?
 
In simple words, a code snippet is a block of code you can utilize in various programming projects. Code snippets are useful for reducing the time it takes to create software by allowing developers to reuse code.
 
Is it good approach to use tag inside tag?
 
Yes, if you want to display the computer/programming code, then using inside tag is recommended.
 
How to organize code snippets efficiently?
 
You can use smart code snippets to organize your code blocks; the best part is you can instantly share them with your team or the world!
 
Is there a way to embed code snippets into the website without javascript?
 
Yes, there is a way to display code snippets on the website without using the JavaScript library. You can use the and tags to insert preformatted text or source code and style them accordingly.
 
Do you recommend to use 3rd party libraries for Syntax Highlighting?
 
Yes, using a 3rd party solution for syntax highlighting on your websites is beneficial. I prefer Prism, a feature-rich Syntax Highlighting JS library.
 
Are you interested in Datadog Static Analysis?
 
Источник
 
Quick tutorial CSS tip: How to show source code the easy way
 
Sometimes when you build a demo HTML document and you want to display the source code of the script in it. The problem is that often your script and what you show gets out of sync when you hard-code it into your docs. One way would be to load the script via fetch() and display it and there are myriads of packages that do that for you. A super simple way to do the same though relies on you embedding the script inside the body of the document. Once you do that, you can use CSS to set its display to block and white-space to pre and voilà: embedded source code: 
 
script  display: block; white-space: pre; padding: 0 1em 1em 1em; color: #fff; background: #000; > 
 
 
 Two things to remember though: script can be long and this basic CSS would also display script blocks without content that point to a file with a src attribute. You can fix that with a not() selector, setting a height and overflow:scroll : 
 
script:not([src])  display: block; white-space: pre; padding: 0 1em 1em 1em; color: #fff; background: #000; overflow: scroll; height: 5em; > 
 
 
 You can even tell your readers what's going on here by setting the display of the script element to relative and use generated content with a position of fixed . Giving it some padding and margins to display it over the box makes it stand out. 
 
script:not([src])  display: block; white-space: pre; padding: 0 1em 1em 1em; color: #fff; background: #000; overflow: scroll; height: 15em; position: relative; > script:not([src])::before  content: "Source code (JavaScript):"; background: orchid; width: auto; display: block; position: fixed; padding: 2px 5px; margin: -1em 0 0 -0.5em; > 
 
 
Sweet, but what about CSS source code?
 
If you put the style block into the body, you can also style it. This is not where it should be, but in a tutorial, why not? All you need to do is to add style to the script selector. 
 
script:not([src]),style  display: block; white-space: pre; padding: 0 1em 1em 1em; color: #fff; background: #000; overflow: scroll; height: 5em; position: relative; > 
 
If the style block is the first element in the document, it needs some margin. And if you don't want to use the same text to display it, it makes sense to add a different before setting: 
 
style  margin: 2em 0 1em 0; > style::before  content: "Source code (CSS):"; background: orchid; width: auto; display: block; position: fixed; padding: 2px 5px; margin: -1em 0 0 -0.5em; > 
 
 
Here be dragons: making things editable
 
OK, here is where it gets wild. If you add a contenteditable="true" attribute to your style block, you can even allow readers to change the settings live and play with them. Whilst this is cool and all, it is not a good idea to put out into the wild without any filtering server-side scripts, as an editable block also allows attackers to include any JavaScript to steal credentials and override other scripts on your server. I did use this in HTML slidedecks in the past with the result of getting my server hacked. So, better not to go that way… If you want to know more about the demo page shown here, it is part of my CanvasShift.js script on GitHub and there is a detailed blog post
 
Источник