I am trying to display some HTML code in my blog post. Is there any way to show that HTML code as an element of that post?
You should go through the documentation about
Writing Code in Your Posts.
Whether you write plugins or hacks for WordPress, or you want to add bits and pieces of code about your own WordPress site or other programming code like HTML, CSS, PHP or JavaScript, putting code in your post that actually looks like code, but doesn't behave like code, is a frequent challenge for bloggers.
It's a nice article on how to display code in post/page of WordPress.
Super easy, and that WordPress Codex page Ram Sharma shared has great material to follow.
Put all your code within the <code></code> element and simply make sure to escape every opening less than symbol "<" and greater than symbol ">" though you might find yourself escaping other things:
Example:
<code><?php echo $var; ?></code>
But in place of the greater than & less than symbol I replaced them with the appropriate HTML character entities "& g t ;" & "& l t ;" no spaces.
Check out an example of writing code in your posts over at my Web Development & Design Blog, no plugin! Pure code!
Building off of Giancarlo Colfer's answer, you can use the <code></code> tags along with the <pre></pre> tags.
Example:
<code>
<pre>
<!-- code goes here -->
</pre>
</code>
Your code will be output exactly as entered.
Great answers so far, I just wanted to add a tip.
If you are blogging about code you have already written; use a text editor (I use Notepad++) with a built in find and replace (Ctrl+H) function.
Find: "<"
Replace: "& l t ;"
then
Find: ">"
Replace: "& g t ;"
As before, remove the spaces from the replace string.
Finally - remember to undo the find and replace and/or don't click save.
Related
Good afternoon. Is there a solution that allows you to frame the piece of code in several languages, and highlight it. Tried several plugins - no one helped.
Note also that wordpress is crazy if tags
<? php / * random code * /?>
found in the text.
The only plugin that handles more or less, but not highlighted as it should - WP-Syntax It is possible to specify the language in the attributes of the tag, eg
<pre lang = "php">
But first when inserting the code necessary to embed a lot of pre-tags you can be confusing, and secondly it each tag is separated from the rest of the code and is very torn strange display of code.
Trying to embed complex code in a standard Wordpress editor window is an exercise in frustration. TinyMCE, the Wordpress editor, is configured to strip any unsafe tags from your code. You can customize TinyMCE to behave how you want it to, but I think that is less than optimal.
A better solution would be to use a plugin like Advanced Custom Fields or build a Custom Post Type to add some plaintext fields with a language selector for styling your code.
This is the default :
<div class="container"></div>
Is there any setting to let it become
<div class='container'></div>
when you press tab?
Editor > Code Style > HTML
I think you might be looking for Code Style Settings.
There is a drop down under "Generated Code" for String literal type: Single Quotes.
Change that.
You may also want to change it for JavaScript as well as Zhe points out, that is in the Punctuation tab.
That is correct but the path is now (IJ 14) :
Editor | General | Smart Keys | XML/HTML
The option you are looking for is :
Add quotes for attribute value on typing '='
I know that this isn't the answer you really want, but I don't think it can be altered.
You can switch it off completely though, under Editor | Smart Keys | XML/HTML there is is an option for adding quotes automatically that you can remove.
Update, years later - changing your mind.
If, like me, you happily applied these tricks and got yourself set up to use single quotes in your HTML and then like me, realized you wanted to change back you might find that you could fix it for HTML but not for XHTML.
For a year or more I have had this problem. I do a fair bit of JSF/XHTML and this was killing me. There is no code style in IntelliJ for XHTML and the XML code style (naturally) does not allow single quotes so this is not configurable there.
Changing the Setting back worked fine in HTML but had no effect in XHTML. I was forced to exit IJ and edit the code style configuration manually. For me, in OS X it was in
~/Library/Preferences/IntellijIdea2017.3/codestyles/<your code style>.xml
There directly under the root element, I found the HTML_QUOTE_STYLE option :
<code_scheme name="[REDACTED]">
... some things snipped ...
<option name="HTML_QUOTE_STYLE" value="Single" />
If you change that "Single" to "Double" then you will be back to double quotes in your JSF.
It's possible however that I am the only idiot that had this problem.
I need to add a PHP snippet inside a molecule in WP. WP Editor allows to insert <code> </code>
but even if I wrap PHP with that it does not seem to help.
All I want it to insert the current year, so I'm OK with either PHP or JS or whatever else WP supports.
Anyone had experience with that?
There are two plugins that come to mind. One is wp-syntax http://wordpress.org/extend/plugins/wp-syntax/, a rich code display plugin with many features. You'll have to switch to code editing view to insert your <code> or <pre> tag with the PHP snippet.
The other one is a low tech homebrew of mine, "include custom field": http://pp19dd.com/wordpress-plugin-include-custom-field/
The homebrew is a shortcode plugin that lets you place arbitrary code or data inside a custom field, and then inject it into the post with something like [include mycode1]. Note that it'll be up to you to encode it to where it can be shown, or modify it to where it acts like a code highlighter (can be done easily with highlight_string.)
Reason I like my brew version is because it a) separates a blog post from the code, and b) survives numerous editing cycles and/or imports. All other inline solutions annoy me to no end.
I need to format text in posts using WordPress to look like a code. Like here in stackoverflow we use { } to separate the code from the text. I need to do the same when I write my blogs in Wordpress
Example ....
code will look like that !
Do you like the one used here: http://inturnets.com/2012/06/a-nice-tackling-with-jquery-and-css.html ?
It's the syntaxhighlighter wp plugin, http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/ , a very customisable one and finally you are using simple tags like [html] html code [/html] or [css] css code [/css]
Good luck! :)
Wordpress has a preformatted paragraph style that works OK without any plugins. Just select the text and then select the Preformatted style on the left side of the formatting bar:
I had installed a plugin, but then found this simpler and it works fine for my purposes.
This might be helpful to you
http://textformat.in/
Please do vote if it worth
Can anyone recommend a module or other Drupal add-on that can be used to format code nicely like I see on a lot of blogs and websites? Ideally something that would integrate with CKeditor, but that's not critical, I can make do with HTML tags if need be. Thanks.
The two most popular Drupal modules seem to be Code Filter and GeSHi Filter for syntax highlighting. For getting GeSHi to work with CKeditor, check out the WYSIWYG - GeSHi bridge module.
Well, there's http://alexgorbatchev.com/SyntaxHighlighter/ which is javascript. It gets applied at view time.
To see your code highlighted in the actual editor, you're probably going to have to work a bit harder. If it were me, I'd start with http://ace.ajax.org/ , which is an editor that grew out of Mozilla's constantly-renamed in-browser IDE project.
Maybe it's to much but check this
http://drupal.org/project/grammar_parser_ui
Quick follow up: as per this post, the WYSIWYG-GeSHi bridge development has been put on hold because of some problems integrating GeSHi buttons into CKeditor's toolbar (they make all the other buttons disappear). I can confirm that this is the case.
However, if I use GeSHi tags in HTML source, they do format things correctly. The really key thing left out of the GeSHi module documentation is that you need to enable it as an input format in Drupal.
Next I'm going to try this method for integrating GeSHi formatting directly into CKeditor without using the WISYWIG module or any bridges. Thanks again for everyone's help.
There's the Prettify module that implements Google Code Prettify as JS library. It works out of the box but it appears to duplicate the pre tags, that is, one pre tag appears as container for the other one:
<pre class="prettyprint prettyprinted">
<pre class="prettyprint">
<code>
.myClass {
<br>
float: left;
<br>
}
</code>
</pre>
</pre>
That's only annoying because you can't really style the pre tag if there's two of them because all your styles are duplicated leading to double margins, padding, borders. etc.
Still, it works out of the box if you can deal with using the default styles provided with the module, and there are a number of them, i.e. Google Code, Stackoverflow etc.enter link description here