![]() An all round improvement to my way of thinking.If you want to add a block of code to a list item, you have to add an extra 4 spaces for every level of that list. It also had the benefit of reducing the assets required which in turn improved page load speed. When I retro-fied the code blocks it looked a little too clean and decided to drop it in favour of, yes, you guessed, default monospace for a more “traditional code” look. Which I mixed with Source Sans Pro for body copy and Lato for headings. I started this project using what I personally considered as the best font for displaying code – Source Code Pro. We have a basic container, and our content is encoded, we can add basic styling. ![]() Now the code block is selectable via CTRL+A and the Home and End keys also work. The article Best Practice for Code Examples strongly suggests making code blocks editable for content navigation and selection, greatly improving accessibility and usability: Language HTML Very useful to indicate skipped pieces of irrelevant detail in code examples. It's written as three horizontal dots (…) and coded …. Consider it as the correct way of writing Yada, yada, yada. You may of noticed I've allowed one HTML symbol to remain, the ellipsis.Īn ellipsis is used to indicate an incomplete or partial fragment. See Syntactic sugaring later in this article for details. There are alternative HTML markup escaping methods available as extensions to the Prism highlighter, a little hacky though. If you need to know more see the PHP htmlspecialchars function. Please ensure the closing EOD appears as the first characters on its own line. ![]() $str = str_replace("…", "…", $str) Įverything sitting between 'EOD' and EOD will be automatically converted by PHP on the server. $str = htmlspecialchars($str, ENT_HTML5, ENT_NOQUOTES) This process used to be a royal pain in the proverbial but on applying a little PHP, we return the cream to the medicine cupboard. Escaping HTML, with PHPĪlternatively, by using a small snippet of PHP, we no longer have to manually encode symbols (, &, etc) into HTML entities ( <, >, &, etc).This tool will escape HTML, CSS, JavaScript or markup by pasting in the source and embedding the result: Escaping HTML. Here's a table outlining the most commonly used HTML symbols. Parsing special charactersĪll special symbols (HTML entities) require encoding prior to use in a HTML document. The figure element in HTML 5 was designed to contain code examples amongst other specifics and may also include a description in a figcaption block. If you need more info read Everything you need to know about the pre element. So it appears in the browser the same as it appears in the HTML. Using the pre tag indicates to the browser its contents are preformatted. We semantically mark-up the content by containing it within a code tag, after all it is code. Generically speaking Good code is simple code.įirstly let's consider the HTML mark-up semantically. Include comments to indicate why it's as is, and not what the code is doing.Avoid long horizontal lines to maintain readability.Perhaps provide explanations between the chunks? Break large blocks into small more manageable chunks, as you would in the code itself.It may be difficult to scroll horizontally if the scrollbar isn't in the viewport. How's that for a package? Best practices when displaying code I'll even throw in how to expand the code area, and copy-to-clipboard using JavaScript. In this article I endeavor to incorporate all you need to know to produce beautiful code examples on your own pages.Ĭovering best practices, semantics, encoding symbols, visual styling and language syntax highlighting.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |