Hey guys I write posts occasionally on blogger but today I stuck with one problem which is related to code snippet. I want to add html and JavaScript code in blogger but not find anything useful to do this task Then I used copy code from visual Studio then paste to blogger directly but sometimes code gets mangled and I want to deliver clear code to my reader.
I search a lot on google at last I find hilite website but this website is not working because it will not change special character like "<" And ">" To "<". I use hilite then copy the code and paste to my blogger post then function of this code will execute rather than showing code to posts So anybody here have idea how to do this task.
Thanks in advance!
First of all this is best rated question on internet because as you know there is no plugins and tools available on blogger to do this task but parallelly as we compare this thing to WordPress then there are tons of plugins are available to complete this task.
So Coming to main point how to add code snippets in blogger posts then your answer is just use third party syntax highlighting library from Highlightjs.
Highlightjs is a syntax highlightning library which use JavaScript and CSS code to high light code chunks in blogger. Also this platform supports 95 styles and 189 languages but this data is not static probably this data changes to new but from writing this post these are current data for sure if you want to know more about styles and languages then click on this .
Use this library to your layout html:—
<!-- below is used to highlight code in blogger-->
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/github.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/languages/r.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
Now use pre tag in your blogger anywhere you want code snippet as depending upon your need.Use this below tag to blogger post where you want code box.
<pre><code class="html">
/* Paste your code here */
</code></pre>
If you want step wise solution with example then follow this blogger post. gforgeekspot
Hope this helps! Cheers
I have same problem back then, the solution is simple.
<script> /*<![CDATA[*/
Your javascript code
/*]]>*/ </script>
Related
Is there a way to put some custom code in the head of the page? Before Elementor you could do this by editing the header.php file of the template, but now, elementor eliminates all the code from the template, and there is no way (at least an obvious way) to do this. For me this is very important, because I like to put some tags in the code and also this is a perfect way to implement Google Analytics without using any other plugin. Google speed showing to add preload fonts because of speed. I also want to add Preload meta in header but don't want to use plugin. Please suggest better for this.
Thanks
as for google analytics the codes are javascript. you can easily add them into header using "HTML Widget" and then add the code between script tags.
and if you are looking for a way to add php codes, i recommend Dynamic.ooo. the plugin has a widget called "PHP Raw" which lets you write your php in elementor and put it anywhere you want. i myself currently use this plugin and it is a swiss army plugin!
I'm not a front-end developer and have been struggling for hours to get highlight.js to do what I want. Need to display code nicely in a blog. Okay, it works perfectly in that it renders the code I post into
<pre><code>...</code></pre>
...very nicely and colourfully with the chosen style, idea.css for example. I've got all the styles and highlight.pack.js ready to go in the directory.
But it is so messy to paste the whole program between those tags! It is more cleanly reusable for other things if the code can stay in its file.
What is the shortest and most elegant way (without loading in any external libraries if possible) to get it to pull the code out of a python file in the same directory myCode.py in between those tags?
The main reference for this library is here.
I am assuming that your code file to highlight lives on the webserver.
Import the file using JQuery get.
Put the content into the code tags.
Call the appropriate function from hightlight.js to make it highlight the code.
Here is some HTML/JS code:
<pre><code></code></pre>
<script type="text/javascript">
$.get("/myCode.py", function(response) { //(1)
$("code").html(response); //(2)
$("code").each(function(i, block) {
hljs.highlightBlock(block); //(3)
});
});
</script>
Note that this assumes that there is only one <code> tag in your page.Otherwise step 2 needs to be adjusted.
I'm on windows and I want to create a web-based code snippet tool for my own consumption. Because every awesome app seems to exist only on mac. Snippley is ok, but it doesn't have a search functionality.
Is there a javascript library or a jquery plugin that allows me to present code snippets in a nice way? Something like the one in Nettuts:
The most beautiful and most used i guess is the Google code Prettify.
It's a css library for doing exactly this screenshot you paste.
http://code.google.com/p/google-code-prettify/
you can use it with Twitter Bootstrap Css library too with Google Code Prettify: http://twitter.github.com/bootstrap/
Check the page source of Twitter Bootstrap and you gonna see that you need only something like this:
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
Or you can choose between 16 free javascript code protiffiers here: http://www.1stwebdesigner.com/css/16-free-javascript-code-syntax-highlighters-for-better-programming/
and that's it!
I've tried creating a new post on my Wordpress blog and I've pasted an external code from a site, which has a <script src="..."></script> in order to work.
When I publish my post, the script tag simply gets deleted.
Is this a default behavior in Wordpress? Is there any way to avoid this? (preferably without doing any modifications to Wordpress or using inline code).
No this is not default behaviour in wordpress. I have added <script> tags to the html view of a page or post no problem.
Did you switch the view after you add the code ? If so, don't. Wordpress will delete all tags if you switch to view back from HTML.
Like Tim said, you probably posted the code into the Visual Editor (doesn't accept any HTML tags, like scripts). You should to the HTML editor to implement your code, but if you want to have it on more than one page, you should open up the Appearance Editor and paste it into your theme where you need it (most likely in the header).
If you put the script code in html and then switch to the visual editor, it will delete the script. This is a commonly reported problem and is the default behavior of wp.
Wordpress assigns Roles to Users, Users who are either Administrators or Editors can add javascript codes within posts. If the User's role is Author or Contributor then they can not add javascript codes inside posts, even if these users try to add Javascript in HTML mode, wordpress automatically removes the tags.
The company I am working with hosts their webpage on Wordpress. They want me to edit some of the code in order to do various things, such as enable a photo container to be a moving slideshow.
Figuring out the javascript and html to achieve the results they desire is not problematic for me. However, I am unsure how to get full access to the Source Code of the site. I have privileged access to the backend of the site but in wordpress when you go to edit it only shows some of the basic html tags while hiding the <div> and <script> tags and code. Is there any way edit the page in its source code format? I don't want to have to go through the simplified and less expressive/less control Wordpress interface, and I don't even know if I can achieve the desired results with it.
If you try and edit individual pages you're approaching the problem in the wrong way. You probably want to be using a plugin or modifying a plug-in to create the slideshow you need. There are many plugins for wordpress that do what you seem to need.
slider-widget is one such pluging
In Wordpress, there are two main parts to the website's front and backend: the core WP files and the theme that is used. (And other important aspect to a WP site is the database, where all content is stored, including text/images entered in the admin backend.)
Core WP files are not to be changed because they get overwritten with each update. What you want to work with is the theme. Look in Appearance>>Themes and see what the active theme is for the site. It will also tell you the name of the folder the theme files are in.
With FTP, go to root/wp-content/themes/your-theme-name. That's the php, html and css source of the displayed part of the site. Uploaded images are in /uploads/, and plugins in /plugins/.
See http://codex.wordpress.org/Theme_Development to get an idea of how themes are built and how to modify them.
See the rest of the docs at WP to see how to work with plugins, add other javascript correctly so it doesn't conflict with WP's included javascripts, etc. All the docs you really need are at wordpress.org