Display script source code snippet in WordPress blog post

Tutorial for adding source code, script, markup, of different programming languages in WordPress blog post directly using SyntaxHighlighter.

Simply posting source code of any programming language in your blog post or article might appear as the text. To make it look  like a source code of some language, you must have to make it look different then text. Hence we suggest to use the simple plugin called “SyntaxHighlighter” a project developed by Alex Gorbatchev.

According to the project developer, SyntaxHighlighter plugin only warp the code which is added in its snippet shortcode. It does not engrave any of theme file or host file code making it safer to use in blog post.

It support many programming languages like, C, C+, C#, CSS, HTML, Java, JavaScript and more.

This plugin is easy to use and have 7 different color combination which might be perfect for your theme. Also it is east to copy and have full customization options like you can highlight any particular line in code by using highlight function.

Following are configuration parameters with the SyntaxHighlighter:

Related:  Backup WordPress blog database in Google Drive Automatically

The shortcodes also accept a variety of configuration parameters that you may use to customize the output. All are completely optional.

  • autolinks (true/false) — Makes all URLs in your posted code clickable. By defaults it is true.
  • collapse (true/false) — If true, the code box will be collapsed when the page loads, requiring the visitor to click to expand it. Good for large code posts. By defaults it is false.
  • firstline (number) — Use this to change what number the line numbering starts at. It defaults to 1.
  • gutter (true/false) — If false, the line numbering on the left side will be hidden. Defaults to true.
  • highlight (comma-seperated list of numbers) — You can list the line numbers you want to be highlighted. For example “4,7,19″.
  • htmlscript (true/false) — If true, any HTML/XML in your code will be highlighted. This is useful when you are mixing code into HTML, such as PHP inside of HTML. Defaults to false and will only work with certain code languages.
  • light (true/false) — If true, the gutter (line numbering) and toolbar (see below) will be hidden. This is helpful when posting only one or two lines of code. Defaults to false.
  • padlinenumbers (true/false/integer) — Allows you to control the line number padding. true will result in automatic padding, false will result in no padding, and entering a number will force a specific amount of padding.
  • toolbar (true/false) — If false, the toolbar containing the helpful buttons that appears when you hover over the code will not be shown. Defaults to true.
  • wraplines (true/false) — If false, line wrapping will be disabled. This will cause a horizontal scrollbar to appear for long lines of code.
Related:  Display post excerpt instead of full post in Twenty Sixteen

Note and Conclusion:

Learn more about posting source code snippet in blog. Also thanks to Alex Gorbatchev for his wonderful contribution of SyntaxHighlighter.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *