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!
Related
I created a cookie banner with some HTML, CSS and Javascript.
My question is how can I add these files within Wordpress to make the banner works on the whole site?
I know I could just use a Wordpress plugin to generate a cookie banner, but I was wondering if it was possible to integrate my code.
Thanks
These are the following methods:
You may use the plugin "Header and Footer" (This plugin have different TABS like html, CSS, JavaScript) and add your whole in this plugin. So Your code work in whole WordPress website.
First, you need to install and activate the SyntaxHighlighter Evolved plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you can go ahead and edit the blog post where you want to display the code.
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>
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 trying to implement bootstrap tooltips on my site - you'd think it would be easy enough, but something is not working correctly - the bootstrap tooltip is not functioning.
I'm calling all the right scripts, stylesheets and javascript - I believe. I'm following the example here: http://jsfiddle.net/TSZSL/171/ and I believe this javascript could be throwing me?
$('.example').tooltip();
Here's the page I'm referring to. I just get a regular tooltip with no bootstrap functionality.
The problem is your reference to boostrap's tooltip library. You can't link to it like that; it's not a CDN...
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>.
Use netdna's complete JS package or host the individual script yourself. See BootstrapCDN.
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
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