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.
Related
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>
I'm trying to find out how can I add JS code snippets to work with Docusaurus.io (https://docusaurus.io). I want to add some analytics tools to my Docusaurus based web documentation such as - mixpanel, full story, etc. but I didn't find how can I do it.
I am not sure exactly where you'd like to put JS snippet in. Here are some scenarios in Docusaurus.
You may add JS file to siteConfig.js, this section:
scripts: ['https://buttons.github.io/buttons.js'],
If you'd like to add JS snippet to pages, then it is doable since each page is just a React component. Something like this in your render method:
<script type="text/javascript" dangerouslySetInnerHTML={{__html: js_snippet}} />
If you'd like to add JS snippet to docs I think it is pretty hard because docs are in markdown which I don't think you can add script tag.
Hope this helps.
Add a scripts key into siteConfig.js which takes in an array of script sources you want to load in the head. As mentioned on this page - https://docusaurus.io/docs/en/site-config.html#optional-fields
scripts - Array of JavaScript sources to load. The script tag will be inserted in the HTML head.
So you can add it as such in siteConfig.js:
const siteConfig = {
...
scripts: [
'https://buttons.github.io/buttons.js',
...
],
...
};
I am trying to get Isotope javascript ) to work on a test page.
I am trying to get their example of Filtering with Isotope working. (Stackoverflow not allowing me to post a link as I'm new to posting on here...!)
I have copied their example HTML, CSS and vanilla JS into a test page here on my domain: http://chrislydon.co.uk/testiso.php
(A php file because I want to test adding items from a MySQL DB once the basic thing is working!)
I think I have everything I need: reference to the Isotope JS in the head, their JS copied to between tags - and their exact HTML (and CSS).
I am following the example which was labelled as "Vanilla JS" (as their other examples relies on JQuery (which I will implement eventually...))
I can't see what I'm doing wrong that means this verbatim copy of their example won't work....
(Tried it on different browsers - their examples work in them, but my copied example doesn't)
I'm OK with PHP/HTML but only done basic stuff in JS so perhaps I'm missing something terribly obvious!
Thanks for any help you can offer!
There were two main problems:
1) in the <head> of the document, your <script> tag is missing a >: <script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.js"</script>
Change to:
<script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.js"></script>
2) If the above initializer runs in the <head> of the document, there will be no document available to query and document.querySelector('.grid') will return null.
Instead, put the script just before the </body> tag.
Working jsFiddle:
https://jsfiddle.net/dptve3s6/1
Bonus: You have a function called myFunction attached to a button's onClick event, but that function is not defined anywhere. Define it, and enjoy.
I installed Foundation 6 using bower. I keep getting multiple warning in the console every-time I use any Foundation 6 - JavaScript based plugin.
Exact warning :
Tried to initialize magellan on an element that already has a Foundation plugin.
My script includes look like:
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript">
$(document).foundation();
</script>
The warning is triggered by the following code present in foundation.js at line 180 :
// For each plugin found, initialize it
$elem.each(function () {
var $el = $(this),
opts = {};
// Don't double-dip on plugins
if ($el.data('zfPlugin')) {
console.warn("Tried to initialize " + name + " on an element that already has a Foundation plugin.");
return;
}
I have tried re-installing from scratch but it still doesn't work.
Similar question exists in Zurb Foundation Forum but till now there is no good answer.
How do I resolve this?
UPDATE
For Version 6.4.*, all plugins and js based elements tend to work only if $(document).foundation(); is mentioned within the html file. So delete it from app.js if you have written in it. For additional reasons, go through the explanation below.
Although I have mentioned the answer long back in the comments of the question, I felt it will be better to write it up with few more points.
While installing Zurb Foundation 6 using bower (command line), it gives you a nice index.html page to get started which has the <script> tag that refers to an external js file located at root\js\app.js. The app.js file by default has the following code:
$(document).foundation(); //invoke all jQuery based Foundation elements
So basically, you already have everything to get started.
But, this wasn't the way how it worked until Foundation 6 and I wasn't aware of these changes. I didn't go through the contents of app.js as I was assuming it to be empty. I simply did the old way of invoking them in my html pages by writing the following code:
<script type="text/javascript">
$(document).foundation();
</script>
This kind of double referred the jQuery based Foundation elements raising a warning at the browser console.
Solution was to remove either of the invocation, but actually removing the code written in external js file makes more sense for the following reasons:
External references cost an additional http request, very slightly increasing the precious page load time. Why not reduce it, if you can.
Invoking jQuery based elements in the site has to be done as early as possible so that every element gets the original shape in no time. So it makes more sense to mention the invocation within a html page rather than request a external file to invoke.
So, remove the code mentioned in the external js file, that is your app.js file. The warnings would vanish.
For Version 6.4.*, all plugins and js based elements tend to work only if mentioned within the html file.
The best solution to this problem is to put $(document).foundation(); inside <script> tag under .html file, and remove it form external .js file (app.js)
Like this-,
in
xyz.html
<script type="text/javascript">
$(document).foundation();
</script>
other solution like, putting it inside external .js file (app.js), and removing it from .html file, will not always works.
at least it didn't work for me.
Tested on-
foundation version 6.4.2
I'm using ExtJs 4.2.2 and included all necessary js and css files, and my codes work just fine, ONLY IF I write my code into script tags within my html file. When I try to put these code into another file with .js extension and include it between head tags properly, it returns nothing. I'm sure I've included my js file properly because when I fill it with standard js codes, I get results. But with ExtJS syntax, the same code which return results within script tags, returns nothing. How? Do I miss something?
The following two are equivalent. If one works, the others work, too, regardless of what js code you use:
(Ex 1.)
<html><head>
<script>//your js code here</script>
</head><body>
</body></html>
and
(Ex 2.)
<html><head>
<script src="jscode.js"></script>
</head><body>
</body></html>
where jscode.js contains
// your js code here
Furthermore, the following two are equivalent:
(Ex 3.)
<html><head>
</head><body>
<script>//your js code here</script>
</body></html>
and
(Ex 4.)
<html><head>
</head><body>
<script src="jscode.js"></script>
</body></html>
NOTHING will change in behaviour.
I think (but you didnt post ANY code at all, so it's jsut guessing) that you had Example 3 working, but changed to Example 2. But only 3 and 4 are equivalent! And now you call that ExtJS fault!
You are executing code in an onLoad event or a Load event, perhaps like:
$(window).load(function() {
$('p').css('');
})
Remove this section and use only this in the javascript file and include it in a <Head> section:
$('p').css('');
When you are coding in html, then it execute steps one by one. But when we use a separate file then it executes it slower than HTML code.
I think I can use those technique mentioned on the top.
I am sure it will work.