I try to use the highlight.js but it didn't work
i work like they say in the website but i don't know what's wrong
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div>
<pre>
<code class="javascript">
var D = new Date();
</code>
</pre>
</div>
</body>
</html>
I expect the code in the pre tag to display properly but it will only display as a regular text. Please help me !
Or someone can use another way to help me show the code the way stackoverflow displays.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
check the difference here, you are missing https: in the cdn url. I have changed it and it works fine.
I am very tired and trying this from many hours and it won't work, then I added https: before css and js cdn and it worked like a charm.
monokai working cds are given below
css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/monokai.min.css">
js
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
highlight js
<script>hljs.initHighlightingOnLoad();</script>
Related
i am trying to link a stylesheet in another file. I've tried everything, copied it from multiple websites. But it doesen't seem to work. The css doesen't load any way. This is probably a really dumb mistake somewhere. Maybe it just needs another pair of eyes. The css works fine, what is causing problems is the link tag. What i noticed is, when i try to go to http://localhost:8080/styles.css it gives me Cannot GET /styles.css in plain text. I've tried modifying the permissions of the files, doesen't work. The filename is correct.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test zabezpečení prohlížeče</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<h1 id="page-title">Test zabezpečení prohlížeče</h1>
</body>
</html>
I am currently trying to figure out why my dialog boxes are not working. I took code directly from jQuery UI and put it into my own new file too see if I could troubleshoot the problem, but the code from the website doesn't even work correctly when I copy and paste it into a new HTML file. The code in question (directly from jQuery UI):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog
window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
It is supposed to be simple and straightforward but it is driving me crazy at the moment. Any help fixing this would be fantastic.
I just tried the code on codepen and it works fine
But when I tried it on my computer, the css format did not appear in front of me, due to a simple reason
Focus on the following code
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
As you can see, there is only // without https:, so to solve the problem, we just add this https: to the format, so the format becomes as follows:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
The problem is solved, of course, if this is your problem, but if it is not, please explain the problem more with an example of a picture
So I'm working on a project for school and want to include fontawesome-icons. My problem is that no icon, no matter which one I use, does show up. I tried it in an empty html-file with just a blank page and in that case it works. Can someone tell me why it doesn't show up in the image below? Thanks in advance!
Code of my website
...
<head>
<script src="https://kit.fontawesome.com/505871b650.js" crossorigin="anonymous"></script>
</head>
...
If you want things to be simple just put the following inside you <head> tag:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" crossorigin="anonymous">
And you don't need to use <script> tag to integrate fontawesome, take a look a this doc.
I am really basic at HTML/CSS but with the help from this website I managed to get the following working. The colour looks right, so its all working.
But when I put this in the HTML Source Editor in Moodle the colour disappears, so I know that its a HTML editor and the colour is contained in style as CSS. So i guess I need to link to a style sheet to give me that colour, but I have no idea how to do that. Or maybe I am wrong about that, and something else could be done.
I already checked W3 Schools, and its most likely I just don't have the jargon yet to properly look for the answer to this problem, so a google search when you simply don't have the vocab for what exactly I am looking for is difficult.
Please if you can help that's great, but I also want to better know what it is I should be looking at, as I am only doing this for Moodle, any places you can point me to where I can find or see how HTML/CSS works with Moodle so I can learn about it so I can slowly build up my own knowledge. I greatly appreciate this.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.label.label-default {
background-color:#009999;
</style>
</head>
<body>
<h1><span class="label label-default">Survey</span></h1>
</body>
</html>
I will answer to you , first you put style css in same file of html ,so remove the whole link of style . then in style write like this
I advise to you use Adobe Dreamweaver program , I hope my answer solve your problem.
So I'm about to start to code a website using Sublime Text, but I have not touched code in a couple of months (5-7) so I am trying to get used to it again. So I have created my HTML and CSS page, but even though the CSS link is right, it is not displaying in browser. I know once you tell me I will be kicking myself but why is it not showing up?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<title>Home</title>
</head>
<body>
<h1>GymHub</h1>
</body>
</html>
Your code assumes that your folder structure is like this (where your css file is a sibling to the html):
index.html
home.css
However, make sure that if your project setup is in a way that your css is in a folder, you should reflect that in the code:
index.html
-- css
home.css
And you would then put this in your html file:
<link rel="stylesheet" type="text/css" href="/css/home.css">
you have to create a root-directory with the exact adress of the css file , but maybe its because you forgot to make a backslash at the end of the link ( i am not sure )
You are missing the slash in link tag. Try this. Also make sure css file is in same directory.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css"/>
<title>Home</title>
</head>
<body>
<h1>GymHub</h1>
</body>
</html>