I'm following the basic Heroku tutorial using Python (Django) to stand up a web page. I eventually want to blog, and to include code snippets, so I wanted to include highlight.js to make the code look prettier.
However, I cannot figure out how or where to include the <link ... "style/...css" /> and/or <script ...highlight.min.js" ></script> to get things to render - I end up with plain code-text even though my <pre><code>...</code></pre> tags have hljs class appended, and I can see that the stylesheet and script are linked correctly.
Instead of trying to copy and paste 16 different files with 40 lines each, I think it's easiest to just link to my testing page.
page which should be using highlight js but isn't.
Note also that I'm trying to use a highlight.js stylesheet called androidstudio; the giveaway that it's working is that the code background will be gray/black, and some of the words will be bold and different colors (ie the entire point of highlight js).
This question is different from this local static file question because I'm trying to use //cdnjs files, that is, publicly-hosted js and css files.
You forgot the quote (") before stylesheet:
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/androidstudio.min.css" />
When you view source using Firefox it highlights (no pun intended) your error:
Related
I wanted to learn a lil bit of website coding so I decided I want to see how a website is written. I used HTTrack Website Copier to copy a website and then i opend the index.html document. Now I saw a row where it says "-- Please enable Javascript --</p". How do I enable javascript to see what normaly would stand in that row? Also i dont have any html oder css file in the folder where HTTrack put the index.html into. Is that normal?
I dont know what to do about this cause i started 2days ago^^
Chances are, that page you copied is referencing a JavaScript file that you didn't download with the HTML file. Look through your HTML for a <script src="...">...</script> tag or something similar; that's the missing file. Same goes for the CSS, except that will be near the top with <link rel="stylesheet" href="styles.css">.
HTML is how the page is laid out. CSS is how the page looks (font sizes, colors, etc). JavaScript is how the page works (interactive features). I'd start with just basic HTML, you're kind of jumping in on the deep end. Codecademy has great (and free) introductory courses that should help you understand what you're looking at better.
I created a plugin for some web software that doesn't natively support plugins. I found that I could inject code into the head of the plugin webpage through their GUI. Currently, users have to paste a huge block of code into the head which contains the plugin HTML, CSS, and JS all minified into one block. I'd like to instead serve this over a CDN so users could simply subscribe and receive all updates without having to repaste. It also would keep them from having to paste a large chunk of code into the tool and instead it would be a nice link.
I tried:
<link rel="import" href="~my_CDN_link~">
but it seemed to only partially work. I didn't really understand the issue, but I saw that import is deprecated so this seems like it would only be a temporary patch.
At the end of the CDN link is a text file which contains:
HTML
<script>~my_scripts~</script>
<style>~my_styles~</style>
I was hoping there is some way to just resolve this link into the text which it contains and "paste" it into the head of the document. Maybe this isn't even the approach I should be taking? Should I instead provide two links? One for the stylesheet and one from the JavaScript? The JavaScript could then make a call to get the required markup and append it to the document. I'd love to keep it as one link if at all possible.
I use notepad++ and have got an index.html file that contains css and javascript.
Is there a way to display css and javascript code as it does when files are saved in their format; but in this case inside the html file?
Any editor, software, plugin for notepad++?
You can use JavaScript libraries Highlight.js or Prism.js to highlight the <pre> and <code>. Another way is to embed the code with GitHub gist.
Download the javascript library or use the following for Highlight.js:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
Usage:<pre><code class="css"> --you code goes here-- </code></pre>, change the class name to class="js" for javascript.
For Prism.js:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.4/themes/prism.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.4/prism.min.js"></script>
Usage:<pre><code class="language-css"> --you code goes here-- </code></pre>, change the class name to class="language-js" for javascript.
Various themes are available for each library.
To embed you code using GitHub gist, paste your code and create public gist. Then copy the embed link provided and paste it on your html.
I did not fully understand what you are asking but here is my answer:
To add a javascript file/library to your HTML:
To add javascript directly into your HTML code:
Some script here...<\script>
To add a CSS file to your HTML:
To add CSS directly into your HTML code:
Your CSS...
EDIT
So now I understand what you want but I don't know of any add ons. Personally when i started coding HTML and the other related languages I used Coffee Cup free HTML editor: https://www.coffeecup.com/
Now I code for more professional uses and i downloaded a very large editor called Microsoft Visual Studio 2017.
Most D3 examples have the HTML, JavaScript and CSS all in the same file. Using this example http://bl.ocks.org/d3noob/5028304, I am trying to break these into separate files (this way I'll be able to embed D3 into a website, putting the files in the proper locations).
When all in one file, let's say index.html, everything works as it should. When I separate this into 3 files: index.html, sankey_create.js, and style.css, The HTML title (that I inserted <h1>Title</h1>) renders, but the SVG doesn't.
Possible Issue #1: File Referencing
Everything is in one folder and I think that I have referenced the separate files correctly in the header (The console in Firefox says that all the files have loaded):
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="sankey.js"></script>
<script src="sankey_create.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
Possible Issue #2: Binding to External HTML Element
The way this example works is that there is a <p id="chart"> element to which the D3 SVG binds to:
var svg = d3.select("#chart").append("svg") // This line is in sankey_create.js
I'm not sure if I need to reference the element differently now that they are in separate files.
I have only included the code that I think maybe causing the issue since, but Ican provide more code/information if necessary.
To analyse the problem you need to understand that semantically, the script tags can be replaced by the code they reference and the referenced code is executed before the next node is processed, so it's the same as having the code in your index file at the point where the script tags are.
I downloaded and customised a website template to fit my needs. The template came with a number of folders and files including js and bootstrap files.
Everything seems to work fine until I tried to integrate a php script which also happens to be designed and includes a number of js and bootstrap files.
I used firebug to debug the conflicts.
When I include the header and footer files together with the associated js and bootstrap files, the script loses most of the design (ie; the navigation panel).
I noticed that the classes defined in the template bootstrap css files are the same as the ones in the scripts own bootstrap css file.
How can i fix this?
Is there a way to exclude the main sites bootstrap files from affecting the installed script or vise-versa?
I haven't used bootstrap and don't know much about it, but basically if you want to save the bootstrap styles just load them after your script.
Something like this:
<link rel="stylesheet" href="css/YOURCSS.css" />
<script src="js/YOURJS.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/bootstrapJS.js"></script>
These are the files you told you are including...
public_html/bootstrap/css/bootstrap.min.css
public_html/folder/subfolder/script/theme/css/bootstrap.css
<link type="text/css" rel="stylesheet" href="/bootstrap/css/bootstrap.min.css"/>
<link href="/folder/subfolder/script/theme/css/bootstrap.css" rel="stylesheet"/>
Two assumptions :
Both the sets of files are the same in code.
Then, no problem, but it is not, from what you said.
Both the sets are equal by name but different by content. Then, if those files contain classes (or #id rules) of similar names, all the rules will be ordered in First come first read basis, and if there are multiple rules for a single property, the last rule for that property will be applied.
Example:
h1,h2, .heading, #heading{
font-family:georgia; /* from first file in the include order they are specified in html */
font-family:verdana; /* from second file */
font-family:arial; /* from third file */
},
then,
the last rule : font-family:georgia; /* from the third file */ will be applied.
Debugging such things would be harder if you like to do. Because you can not guarantee the way how they get merged up. If all the code is written by yourself, you could have used a minifier like this which removes all duplicates. But that is not the case.
Finally, you said Everything seems to work fine until I tried to integrate a php script which also happens to be designed and includes a number of js and bootstrap files.
Here, it is better to remove CSS classes that are similar in names from the ones that came along with your php script folder.