I am building an online community for IB Math students and for that I plan to use Circle.so. Circle.so seems like a great option given its features (like code injection) and design.
One of the features that the forum tool (such as Circle) needs to have is the ability to render Math notation (LaTeX) or allow code injection so KaTeX or MathJax can be used. KaTeX seems to solve the problem. I am testing/trying to install KaTeX and I have the options to inject code in the head and as a javascript snippet (as shown in the image below).
I have zero programming skills, I wonder if anyone has done it or could help me accomplish that. For the head portion, I placed the following code (it didn't work).
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex#0.15.6/dist/katex.min.js" integrity="sha384-ljao5I1l+8KYFXG7LNEA7DyaFvuvSCmedUf6Y6JI7LJqiu8q5dEivP2nDdFH31V4" crossorigin="anonymous"></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex#0.15.6/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>
KaTeX's documentation can be found here.
Obs: Circle.so has the option to insert custom CSS (if that helps)
This is a 2 part problem, one pretty easy the other a bit harder.
Problem 1
Parsing KATEX
This is relatively easy,
We add the scripts and styles on the page and our custom script to select and render text.
This can go under Header code snippets
Notice: No defer attribute to make it load before JS code runs.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex#0.15.6/dist/katex.css" integrity="sha384-jJFDzw6Rh7jzIumRp31oSKurBXlvFPBHbzi9KbVukp6ZNECGD4UKyhO5tJaJ1uHA" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex#0.15.6/dist/katex.js" integrity="sha384-Xfbu6aqAjKdi+UhRmQROxVxvx/iT6irqZqIPGKTbtyjUVRkdg3aEiaxuMdfVqNyu" crossorigin="anonymous"></script>
And some JS to render KATEX strings.
katex.renderToString( katexText, {
throwOnError: false
});
Unresolved issues
We don't know...
which text to render Katex.
where to place the rendered text.
Problem 2
How do users insert Katex
This is a challenging one coz we don't control the UI. However a workaround could be to use Code option from the toolbar.
However we don't want to parse and potentially break all code blocks, but only specific ones, for this we could add in a key word to trigger katex and keyword can just be katex. So to use katex, users would add a code block with katex on first line and our JS will take it from there.
This can go under Header code snippets
<script id=''>
// Find all `pre` tags
document.querySelectorAll('.trix-content pre').forEach(function(el) {
// Get text inside
var text = el.innerText.replace(/^\s+|\s+$/gm, '');
// Do stuff if text starts with `latex`
if (0 === text.indexOf('katex')) {
var renderedKatex = katex.renderToString(
text.replace('katex', ''),
{throwOnError: false}
);
// Populate katex and additional markup for formatting
el.outerHTML =
'<span></span><section class="katex-wrap">' +
renderedKatex + '</section>';
}
})
<script>
Before scripts
After scripts
Working snippet
// Find all `pre` tags
document.querySelectorAll('.trix-content pre').forEach(function(el) {
// Get text inside
var text = el.innerText.replace(/^\s+|\s+$/gm, '');
// Do stuff if text starts with `latex`
if (0 === text.indexOf('katex')) {
var renderedKatex = katex.renderToString(text.replace('katex', ''), {
throwOnError: false
});
// Populat katex and additional markup for formatting
el.outerHTML = '<span></span><section class="katex-wrap">' + renderedKatex + '</section>';
}
})
.post__more {
display: none;
}
<!-- THIS GOES IN HEAD CODE SNIPPETS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex#0.15.6/dist/katex.css" integrity="sha384-jJFDzw6Rh7jzIumRp31oSKurBXlvFPBHbzi9KbVukp6ZNECGD4UKyhO5tJaJ1uHA" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex#0.15.6/dist/katex.js" integrity="sha384-Xfbu6aqAjKdi+UhRmQROxVxvx/iT6irqZqIPGKTbtyjUVRkdg3aEiaxuMdfVqNyu" crossorigin="anonymous"></script>
<h1>Typical circle.so markup</h1>
<h2>Main post content markup</h2>
<div class="post__body">
<div class="post__inside trix-v2 expanded">
<div class="react-trix-content fullscreen-preview-enabled">
<div>
<div class="trix-content">
<pre>katex
c = \pm\sqrt{a^2 + b^2}</pre>
</div>
</div>
</div>
</div>
</div>
<h2>Comment post content markup</h2>
<div class="post__body" data-controller="post">
<div class="post__inside">
<div class="trix-content">
<div>Ordinary code block,</div>
<pre>const jsVar = 'mi secreto';</pre>
<div>
<br>Latex code block<br><br>
</div>
<pre>katex
e = mc^2</pre>
<div></div>
</div>
</div>
</div>
Related
I have this code, and I cant get it to work in my WordPress, I have used the addons Insert Headers & Footers and also WP Coder... but I am not sure why it will not work, the page is just blank.
How can I get this to work? What should I place where in the WordPress site - plugins etc.?
I have tried to place this in the "WP CODER" under "HTML code":
But it does not work, the page is blank.
1) Add the following code to the <head> section of your website:
<link rel="stylesheet" type="text/css"href=”https://zellr.com/integration/kirpparikalle.css” />
2) Add the following code to the section of your page. Place it inside the element where you wish to see the login and registration forms.
<h1 id="kirpparikalle_title"></h1>
<br/>
<div id="kirpparikalle_container"></div>
<!-- Note: jQuery is requirement for the integration scripts.
If you already have jQuery included in your website, you can remove the next line. -->
<script type="text/javascript" ```src="https://zellr.com/integration/jquery.min.js"></script>
<script type="text/javascript" ```src=”https://zellr.com/integration/kirpparikalle_i18n.js"></script>
<script type="text/javascript">
$(function() {
KK_COMPANY = ' denlillelandsoldat ';
KK_CONFIG['redirect_url'] = 'http://denlillelandsoldat.dk/';
KK_LANGUAGE = 'da';
kk_show_default_login();
});
</script>
It should show some booking module on the page.
Try to copy this exact code and paste it where you want it to appear, you have odd characters in the code you've applied on your website. Also the js code might produce an error to made a little change to the wrapper
<link rel="stylesheet" type="text/css" href="https://zellr.com/integration/kirpparikalle.css" />
<div id="kirpparikalle_container"></div>
<!-- Note: jQuery is requirement for the integration scripts.
If you already have jQuery included in your website, you can remove the next line. -->
<script type="text/javascript" src="https://zellr.com/integration/jquery.min.js"></script>
<script type="text/javascript" src="https://zellr.com/integration/kirpparikalle_i18n.js"></script>
<script type="text/javascript">
(function($) {
$(function() {
KK_COMPANY = ' denlillelandsoldat ';
KK_CONFIG['redirect_url'] = 'http://denlillelandsoldat.dk/';
KK_LANGUAGE = 'da';
kk_show_default_login();
})( jQuery );
</script>
Are you using block editor (gutenberg) or the classic editor?
In classic editor. Paste your codes inside text editor
Same concept in gutenberg tho.
On php, the implementation looks very simple, suppose we have files: header.html, body.html. Then our code index.php will look something like this:
<html>
<body>
<? = require(' header.html ')?>
<div class = "main">
<? = require(' body.html ')?>
</div>
</body>
</html>
Is it possible to do something like this?
<html>
<body>
<link rel = "import" href = "header.html">
<div class = "main">
<link rel = "import" href = "body.html">
</div>
<script>
/ * A magic js function that replaces <link rel = "import"> with the content of the html document * /
</script>
</body>
</html>
PS I understand that this will work on a very limited number of browsers.
A number of JavaScript template engines are available.
Handlebars.js and Mustache.js use curly brackets for variables.
Jade/Pug dispenses with brackets altogether.
You could build your own template library and use any format you want. The spectrum of browsers that it works on would depend on how far back in history you're willing to support.
Whereas PHP enables you to import static headers and footers, with JavaScript you're more likely to have a static template with the header and footer built in, and import the body content dynamically. We see this a lot with lazy loading content on sites like Google image search and Pinterest.
I am struggling with any task requiring the smallest bit of brain function. The task I'm currently struggling with is adding the AOS library to my site on Wordpress.
I added the following code to my full-width-page.php template in the Wordpress Editor:
<script> AOS.init(); </script>
In addition, I added the following code under Appearance > Theme Settings > Style > External JS field & External CSS field
<script src="uploads/aos-master/dist/aos.js"></script>
<link rel="stylesheet" type="text/css" href="uploads/aos-master/dist/aos.css">
After all of that, I put the data-aos attribute to html element that I want to animate, like so:
<div data-aos="fade-up";>
<h2>TEST TEST TEST</h2>
</div>
But then... nothing happens ;(
Please, if it's possible to set up, share with me what I'm doing wrong.
Are you sure aos stylesheet and javascript file loaded correctly? You can use Chrome's or Firefox's debugger on page (Chrome's Shortcut is Ctrl(or CMD)+Shift+i)
also you can change stylesheet and javascript file codes with code below;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.js"></script>
I am using marked to parse markdown content. During rendering, I get the first line of every post in blocks. How to get rid of it ?
Image : Displays first-line as a block
I am using marked cdnjs
https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js
I am using jQuery 1.12.4 (minified)
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
I am using class = "content-markdown" to allow javascript to find the contents to parse.
<script type="text/javascript">
$(document).ready(function(){
$(".content-markdown").each(function(){
var raw_content = $(this).text()
var marked_content = marked(raw_content)
$(this).html(marked_content)
})
})
</script>
The content :
<div class = "content-markdown">
<p> {{post.body|safe}} </p>
</div>
You have a leading space in <p> {{post.body|safe}} </p>, this creates <pre> in markdown.
Try to remove it: <p>{{post.body|safe}}</p>
I have recently discovered the new trend of including all .js script at the end of the page.
From what i have read so far seems pretty ok and doable with an exception.
The way I am working is using a template like:
<html>
<head>
<!-- tags, css's -->
</head>
<body>
<!-- header -->
<div id="wrapper">
<?php
include('pages/'.$page.'.php');
?>
</div>
<!-- footer -->
<!-- include all .js -->
</body>
</html>
Now, if I want to use this example on my page http://www.bootply.com/71401 , I would have to add the folowing code under my jquery inclusion.
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
But that would mean I either use that in every page - even if I do not have use for it, either generate it with php in the $page.'php' file and echoing it in the template file, after the js inclusion.
I am sure though, better methods exist and I don't want to start off by using a maybe compromised one.
Thanks!
Please avoid using inline scripts as they are not good maintainable and prevent the browser from caching them. Swap your inline scripts in external files.
Fore example you could put all your JavaScript in one file an check the presence of a specific element before initialize the whole code. E.g.:
$(document).ready(function(){
if($('.thumbnail').length) {
// your thumbnail code
}
});
A better way to execute "page specific" JavaScript is to work with a modular library like requirejs. You can modularize your scripts depending on their functionality (like thumbnails.js, gallery.js etc.) and then load the necessary script(s) depending e.g. on the existence of an element:
if($('.thumbnail').length) {
require(['ThumbnailScript'], function(ThumbnailScript){
ThumbnailScript.init();
});
}
The best way you can go is create a separate file for this code.
Let's name it app.js. Now you can include it under the jQuery inclusion.
<script type="text/javascript" src="app.js"></script>
This will prevent code repeat.
One more thing, pull all the code in $(document).ready(). Here is an example. So your app.js file will look like this:
$(document).ready(function(){
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
})