I can't setup KaTeX. It works if I load KaTeX remotely, but it refuses to work locally. Here is my code:
<!DOCTYPE html>
<html>
<head>
<link href="katex/katex.min.css" rel="stylesheet" type="text/css">
<script defer src="katex/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous"></script>
<script
defer
src="katex/auto-render.min.js"
integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI"
crossorigin="anonymous"
onload="renderMathInElement(document.body);"
></script>
</head>
<body>
<div id="el"><span>$$2+\frac{1}{x}$$</span></div>
</body>
</html>
What can be the reason for not working? If I paste paths of remote files of KaTeX, it works perfectly.
Remove integrity and crossorigin. And by default the auto-render.min.js is located inside contrib folder, But you did not path it to katex/contrib/auto-render.min.js and you path it to katex/auto-render.min.js. So make sure where the auto-render.min.js is located. if auto-render.min.js is located inside the contrib folder the below code would work.
<!DOCTYPE html>
<html>
<head>
<link href="katex/katex.min.css" rel="stylesheet" type="text/css">
<script defer src="katex/katex.min.js"></script>
<script defer src="katex/contrib/auto-render.min.js"
onload="renderMathInElement(document.body);"></script>
</head>
<body>
<div id="el"><span>$$2+\frac{1}{x}$$</span></div>
</body>
</html>
Related
I have an ASP.Net MVC 5 project using Infragistics IgniteUI. When I load igniteui charts or grids using my bundled and minified infragistics scripts and stylesheets, I get errors. When I use the unbundled versions, I do not get the errors.
UPDATE I also tried bundling with minification disabled, which still produces the errors.
Why is it looking for images in the /bundles/ path when I use the bundled files?
What can I do differently, to prevent these errors while using bundling?
Errors
The controller for path '/bundles/images/ui-icons_888888_256x240.png' was not found or does not implement IController.
The controller for path '/bundles/images/igLoadingSmall.gif' was not found or does not implement IController.
BundleConfig
#region Scripts
...
bundles.Add(new ScriptBundle("~/bundles/igniteui_full_js").Include(
"~/Scripts/IgniteUI/js/infragistics.core.js",
"~/Scripts/IgniteUI/js/infragistics.dv.js",
"~/Scripts/IgniteUI/js/infragistics.lob.js",
"~/Scripts/IgniteUI/js/infragistics.loader.js"
));
#endregion
#region Styles
...
bundles.Add(new StyleBundle("~/bundles/igniteui_full_css").Include(
"~/Content/IgniteUI/css/themes/infragistics/infragistics.theme.css",
"~/Content/IgniteUI/css/structure/infragistics.css"
));
#endregion
Layout Head Razor Code
<!-- Header Styles-->
#Styles.Render(
"~/bundles/css",
"~/bundles/igniteui_full_css"
)
<!-- Header Scripts-->
#Scripts.Render(
"~/bundles/jquery",
"~/bundles/ajax",
"~/bundles/modernizr",
"~/bundles/bootstrap",
"~/bundles/site",
"~/bundles/igniteui_full_js"
)
Unbundled Head - Doesn't produce Errors
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Header Styles-->
<link href="/Content/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/Dashboard.css" rel="stylesheet"/>
<link href="/Content/IgniteUI/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"/>
<link href="/Content/IgniteUI/css/structure/infragistics.css" rel="stylesheet"/>
<!-- Header Scripts-->
<script src="/Scripts/jquery-2.2.0.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/validator.js"></script>
<script src="/Scripts/jquery.browser.mobile.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/bootstrap-multiselect.js"></script>
<script src="/Scripts/site.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.core.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.dv.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.lob.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.loader.js"></script>
</head>
Bundled Head - Produces Errors
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Header Styles-->
<link href="/bundles/css?v=DOErVhQffVVJij5tRivXIDYvvea9XjXYoWkD6iph4yo1" rel="stylesheet"/>
<link href="/bundles/igniteui_full_css?v=oMN-4N9H6hCThCn7D6WHIiusJgqj7Qk9KfeKje7iGdI1" rel="stylesheet"/>
<!-- Header Scripts-->
<script src="/bundles/jquery?v=3wcNYlWV3nKyr3gSm0Ry9LrwfpXaysXErYMcQN9fkcw1"></script>
<script src="/bundles/ajax?v=jmjhTWiGrUMlGQS2hayanNTeGVZ9FC7i0HnCBpQ4IZ81"></script>
<script src="/bundles/modernizr?v="></script>
<script src="/bundles/bootstrap?v=kNIhecyepPMk8f_DFvoGkBz2T4zIItHFFHq2488ZHwY1"></script>
<script src="/bundles/site?v=stk1SwAEJZvoHt7p5QZ9202zmQ1IeBvXWmqmxFpIXI01"></script>
<script src="/bundles/igniteui_full_js?v=6y5k9Wl7x2PlzNsRN0azCfVIh1oR8SLPZohqnlbLrNo1"></script>
</head>
View
#using Infragistics.Web.Mvc
#using MyProject.Web.Website.ViewModels
#model ReportViewModel
#(Html.Infragistics()
.Grid(Model.ReportData.AsQueryable())
.ID("grid")
.AutoGenerateColumns(true)
.AutoGenerateLayouts(true)
.DataBind()
.Render()
)
I believe the issue is that you need a CssRewriteUrlTransform because the bundling changes where the resources should be referenced from.
bundles.Add(new StyleBundle("~/bundles/igniteui_full_css")
.Include("~/Content/IgniteUI/themes/infragistics/infragistics.theme.css", new CssRewriteUrlTransform())
.Include("~/Content/IgniteUI/structure/infragistics.css", new CssRewriteUrlTransform()));
On a side note, you can remove the infragistics.loader.js from your script bundle as you're bundling all of the combines script files, thus the loader is not needed.
Trying to learn webix (and javascript at all). Usually the common practice is loading javascript libraries at the end of the body.
The webix quick start doc says:
<!DOCTYPE HTML>// specifies document type
<html>
<head>
<link rel="stylesheet" href="../../codebase/webix.css" type="text/css">
<script src="../../codebase/webix.js" type="text/javascript"></script>
</head>
<body>
e.g. it loads the library in the head.
Questions:
the webix lib should be loaded in the <head>?
if yes, where should be loaded jQuery and twitter bootstrap?
and in what order?
You can place webix.js anywhere on the page. Just be sure that JS code that uses Webix API is used after webix.js loading
Normally scripts are placed at the end of HTML file as they only add some interactivity to the page. In case of Webix UI, without webix.js you will not see any content on page at all, so there is no benefits from putting webix.js at the end of page.
As for jQuery - if you plan to use webix-jquery integration you need to load webix.js AFTER loading the jQuery ( at the head, or at the end of file, doesn't matter )
You need to follow the below syntax or process for using the webix.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans:300|Raleway|Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css">
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" >
webix.ui({
view:"calendar",
id:"calendar1"
})
</script>
</body>
</html>
Any dependencies must load on top webix.js, so that you can use them in your JS file.
I have created two Dart app using Polymer. The two tags created are: weather-tag and qotd-tag.
In weather-tag, I am getting weather information from a remote service and in qotd-tag I am getting qotd from local machine. Both running fine in Dart and also in compiled JS.
I am now integrating these two Dart "widget" into my own index.html.
The HTML snippet is like following:
<html lang="zh-CN">
<head>
<script src="/packages/shadow_dom/shadow_dom.debug.js"></script>
<script src="/packages/custom_element/custom-elements.debug.js"></script>
<script src="/packages/browser/interop.js"></script>
<meta charset="utf-8">
<script src="/getqotd.html_bootstrap.dart.js"></script>
<script src="/getweather.html_bootstrap.dart.js"></script>
</head>
<body id="home">
<polymer-element name="qotd-tag">
<template>...
</template>
</polymer-element>
<polymer-element name="weather-tag">
<template>...
</template>
</polymer-element>
<weather-tag></weather-tag>
<qotd-tag></qotd-tag>
</body>
</html>
The problem is it only shows the qotd-tag.
If I took out all qotd-tag related reference (js, polymer-element, the tag), weather-tag can be displayed correctly.
If I change the sequence of the two js file (weather.js comes first and then qotd.js), now it shows only the weather-tag.
I think there must be some conflict in the js declaration.
I can solve this issue by building a new tag with the two tags' functions but is there a way to have two or more polymer-element in one HTML file?
This is how you can import and use two elements in a Dart app:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="import" href="foo_element.html">
<link rel="import" href="bar_element.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<foo-element></foo-element>
<bar-element></bar-element>
</body>
</html>
For the full code, look at this gist:
https://gist.github.com/shailen/8055849
I made an application with dart / polymer / sockets, and i want to compile it in Javascript. But I don't know how to do. I tried to do "Generate Javascript", but it said "You do not have main entry point".
Should I compile manually each dart files ?
Does build.dart useful ?
Edit Added index.html from comments:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="import" href="console.html" />
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="css/main.css" />
<script src='packages/polymer/boot.js'></script>
<title>XXX</title>
</head>
<body>
<fei-console></fei-console>
<script type="application/dart">
main() { }
</script>
</body>
</html>
If it is complaining about a main entry point, I suspect it cannot find a main() function defined anywhere. In your index.html (or whatever the main html file is called), you presumably have a link to a Dart file. Does that file have a main() function defined?
I am developing an iPad application with PhoneGap and jQueryMobile and Kinvey's Javascript method for data storage. It's working fine in simulator and I am not able to get it working in the iPad. I am attaching the index.html code below
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,width=device-width, user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" href="jquery.mobile-1.1.0.css"/>
<link rel="stylesheet" href="jquery.mobile.structure-1.1.0.css"/>
<link rel="stylesheet" href="jquery.mobile.theme-1.1.0.css"/>
<link rel="stylesheet" href="datetime/jquery.mobile.datebox.min.css" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="datetime/jquery.mobile.datebox.min.js"/>
<script async src="kinvey-js.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
if(typeof Kinvey != 'undefined')
{
alert('Kinvey is there');
}
else
{
alert('Kinvey is not there');
}
});
</script>
</head>
<body>
Test
</body>
</html>
I am getting the alert message "Kinvey is there", when I run on simulator and I am getting the alert message "Kinvey is not there" on my iPad.
Have you tried loading the library non-async?, change
<script async src="kinvey-js.js"></script>
to:
<script type="text/javascript" src="kinvey-js.js"></script>
Since you're not pulling the library from our AWS bucket you don't need to load the library async. See if this helps make the loading more predictable.