I can't seem to get syntax highlighting to work with highlight.js. Here's a test example:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<title>Test Highlight</title>
</head>
<body>
<pre>
<code class="language-python">
def f(x, y):
return x + y
</code>
</pre>
</body>
</html>
I included the CSS and JS CDNs and called hljs.initHighlightingOnLoad(), yet code still shows up entirely in black text:
What am I doing wrong?
you have a typo in your link and script tag URL.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<title>Test Highlight</title>
</head>
<body>
<pre>
<code class="language-python">
def f(x, y):
return x + y
</code>
</pre>
</body>
</html>
Related
My css file is not changing the thhing i need:
Here's my html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/www/style.index.html.css"></script>
<title>Test</title>
</head>
<body>
<h1 class="test">Server Test</h1>
</body>
</html>
and here's my css:
.test{
font: optional;
color: red;
}
the class test is not working, and I have no Idea why. if you have an answer, please help! :)
Bob
PS: sorry for the weird ass title.. The bot is just stupid
You add/import/link your css file as follows <link href="./file_name.css" rel="stylesheet" />
Have I made a mistake when writing the code? And if not, is there another way to link CSS to HTML Page? I have tried a couple different ways of writing it but nothing seems to work.
Here's how I wrote it...
<head>
<title>Quiz App</title>
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>
I also tried...
<head>
<title>Quiz App</title>
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<link = rel="stylesheet" href="css/style.css"/>
</head>
Thanks
You wrote viewport as viewpoint in your meta tag.
In your first snippet, change this:
<meta name="viewpoint" content="width=device-width, initial-scale=1">
To this:
<meta name="viewport" content="width=device-width, initial-scale=1">
So, I've been trying to make the header responsive as it should but it does not seem to work at all.
Any help would be nice.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<h2>This is just a test page that does not work on three tested devices any help would be nice.</h2>
</body>
</html>
Enusure to add this <meta name="viewport" content="width=device-width, initial-scale=1">
You can use bootstrap head and it will do it for you.
<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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
Bootstrap is amazing for creating websites: https://www.w3schools.com/bootstrap/default.asp
How can I resolve the print of special character in Angular (see in file attachment)?
In my index.html, I define :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>LoginCCPD</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
I am trying to use "vulcanize index1.html > index2.html", but am stumbling on an issue in IE. I have condensed it into this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src='bower_components/webcomponentsjs/webcomponents.min.js'></script>
<link rel="import" href="bower_components/polymer/polymer.html"/>
<link rel='import' href='bower_components/paper-drawer-panel/paper-drawer-panel.html'>
</head>
<body>
<paper-drawer-panel id="paperDrawerPanel">
<div drawer>
drawer
</div>
<div main>
main
</div>
</paper-drawer-panel>
</body>
In Chrome the result is fine, but in IE, "drawer" and "main" are shown incorrectly
Anyone?
Seems to be a bug which is already logged
https://github.com/Polymer/vulcanize/issues/209