Within my rails application I use mathjax (TEX-AMS_HTML) to render latex formulas.
When entering formulas in a comment I use the codecogs Equation Editor with TinyMCE.
My current mathjax config ontop of (TEX-AMS_HTML) is:
"HTML-CSS": {linebreaks: { automatic: true, width: "container" }},
displayAlign: "left",
extensions: ["tex2jax.js","MathMenu.js","MathZoom.js"],
jax: ["input/TeX","output/HTML-CSS"],
TeX: { extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"] },
tex2jax: { ignoreClass: "w1", processClass: "active|comments-content" }
My problem is that some formulas are not rendering out, consider the following:
\[ foo\textup{bar} \]
This renders foo \textup bar. I have also noticed some symbols rendering textually such as:
\[ \AE \SS \]
This would render \AE \SS instead of the appropriate symbols.
I have tried switching to SVG, adjusting inline/display settings and cannot solve this.
Anyone have some idea as to why this is happening?
EDIT: Here is a contained example
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Mathjax</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": {linebreaks: { automatic: true, width: "container" }},
displayAlign: "left",
extensions: ["tex2jax.js","MathMenu.js","MathZoom.js"],
jax: ["input/TeX","output/HTML-CSS"],
TeX: { extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"] },
tex2jax: { ignoreClass: "w1", processClass: "active|comments-content" }
});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body>
<div id="wrapper">
<div id="main">
<div class="w1">
<div class="comments-content">
<p>\[foo\textup{bar}\AE\SS\]</p>
<p>\[K_{E}=\frac{1}{2}m(\frac{80}{3.6})^{2}\]</p>
</div>
</div>
</div>
</div>
</body>
</html>
Which renders as: http://i.imgur.com/bUJXZPX.png
Notice that whilst mathjax is working and correctly renders the 2nd line, the first line of latex is not escaped.
EDIT2 (22/06/2017):
"Note from the future: cdn.mathjax.org is nearing its end-of-life, check mathjax.org/cdn-shutting-down for migration tips (and perhaps update your answer for future readers)" - Thanks to user Peter Krautzberger
Basically this means the cdn used in my code example will need to be replaced with a localised version of mathjax.
The macros \textup, \AE, and \SS are not part of the default MathJax TeX macros and are not defined in your inline configuration, which is why the rendering in the image has them marked in red.
You'll see a more specific error if you remove the noundefined and noerrors extensions from your configuration -- which are also in the combined configuration TeX-AMS_HTML, so you'll need to drop that as well; as you can see from the link, your inline configuration entails all of TeX-AMS_HTML. (In production, it's preferable to use a combined configuration file since they load as a single large file.)
For a list of all default MathJax macros, see http://docs.mathjax.org/en/latest/tex.html#supported-latex-commands.
For how to define macros in MathJax, see https://tex.stackexchange.com/questions/139699/equivalent-of-mathup-for-upright-text-in-math-mode. From there an example:
MathJax.Hub.Config({
TeX: {
Macros: {
RR: "{\\bf R}",
bold: ["{\\bf #1}",1]
}
}
});
i.e., add a Macros block to the TeX block in your configuration.
(A particular case is\textup, which is a LaTeX text mode macro and MathJax focuses on math mode. Depending on the use case, the math equivalent might be \text{}, \mathrm{}, or something else, see this TeX.SE questions. Of course you can define \textup to be whatever you like but you might run into trouble backporting content to real TeX).
Related
I have an anchor tag on a page in my Svelte app. The link to the anchor works on the page itself, but I can't link to the anchor from another page. And when I enter the URL with the anchor, the page doesn't scroll down. I need to be able to give people a link and have them go to a specific part of the page.
Here's the relevant code:
<script>
function scrollIntoView({ target }) {
const el = document.querySelector(target.getAttribute("href"));
if (!el) return;
el.scrollIntoView({
behavior: "smooth",
});
}
</script>
<nav>
<a href="#here" on:click|preventDefault={scrollIntoView}>go to anchor</a>
</nav>
<main>
<section id="section-1">
... lots of lorem ipsum ...
</section>
<section>
<h2 id="here">anchor</h2>
And I have a REPL here: https://svelte.dev/repl/e651218bdb47455d9cafe8bff27c8d7b?version=3.24.0
I'm using page.js for my routing to components -- I haven't found anything specific about targeting anchor tags in the documentation.
Any help would be greatly appreciated.
You don't need JS for smooth scrolling, just add some CSS:
/* :global if in component */
:global(html) {
scroll-behavior: smooth;
}
REPL
As for scroll on page load, that is an issue of client-side rendering. For SSR the CSS alone takes care of everything but if the element that should be scrolled to is added after the page is loaded, the scroll will not happen.
One way of dealing with that would be to add an onMount, ideally high up in the component hierarchy so it triggers after everything is mounted, which manually performs the scroll:
onMount(() => {
const { hash } = document.location;
const scrollTo = hash && document.getElementById(hash.slice(1));
if (scrollTo)
scrollTo.scrollIntoView();
});
(Some of that logic is from SvelteKit which does all that automatically.)
I am trying to send the css into RenderSection in _Layout.cshtml file. That is
#RenderSection("mycss", required: false)
But when I try to send the css from a razor view (.cshtml file ) it says,
The name Section doesn't exists in current context.
My code is given below
#Section mycss
{
<style>
h2 {
color: green;
}
</style>
}
the 's' in section needs to be lower case, and intellisense is probably complaining about that in Visual Studio:
#section mycss
{
<style>
h2
{
color: green;
}
</style>
}
Now that I've answered the question, I just want to add that, generally speaking, I would not advise passing css like this (although I'm sure someone is going to comment about a corner case) because it is a bad practice and would recommend that you put it in a css file.
I am running ckeditor 4.1.4 on a ruby on rails app. The advanced content editor seems to be stripping anything other than basic attributes.
For example, if I have a word doc with 'this is a test' where 'is a test' is bold, red and 28 point and looking at the contents of the clipboard with clipview shows
<body lang=EN-US style='tab-interval:.5in'>
<!--StartFragment-->
<p class=MsoNormal>This <b style='mso-bidi-font-weight:normal'><span
style='font-size:28.0pt;line-height:107%;color:red'>is a test</span></b><o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<!--EndFragment-->
</body>
</html>
It would appear that it is picking up the color,size and bold attributes.
However, when I paste that into a text area using ckeditor and look at the source in ckeditor, I see
<p>This <strong>is a test</strong></p>
The attributes other than strong have been removed.
My body tag on the form is
<div class="field">
<%= f.label :body %><br>
<%= f.cktext_area :body, :rows => 80, :cols => 120 %>
</div>
I have gone into C:\Ruby200\lib\ruby\gems\2.0.0\gems\ckeditor-4.1.4\app\assets\javascripts\ckeditor\config.js and added
config.allowedContent = true;
config.extraAllowedContent = '*(*);*{*}';
config.removeFormatAttributes = '';
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
I tried adding the three config lines inside the block and that didn't work. I read a suggestion about adding them outside the config block so I tried that. I did restart the server but it still strips out the additional attributes.
This is an intranet application and, given our situation, I'm not worried about content filtering. I just want the users to be able to copy and paste with all attributes.
------ edit 1
I looked at the source of the page and see
//<![CDATA[
(function() { if (typeof CKEDITOR != 'undefined') { if (CKEDITOR.instances['document_body'] == undefined) { CKEDITOR.replace('document_body', {"allowedContent":true}); } } else { setTimeout(arguments.callee, 50); } })();
//]]>
</script>
I'm not sure if the allowedContent statement should be working.
There are many ways to configure CKEditor, but the most simple one is passing object as a second parameter to CKEDITOR.replace (just as it's shown in your last piece of code).
However allowedContent: true can be not enough to enable pasting anything, because there are also paste filters in CKE, enabled in default in Chrome and Safari. If you're using that browser, CKE will strip off all classes, styles and div and span elements. To disable that behaviour, you should also pass pasteFilter option set to null:
var editor = CKEDITOR.replace( 'editor', {
allowedContent: true,
pasteFilter: null
} );
If you don't want to mess with configuring CKE, you can also disable paste filter on the fly:
editor.on( 'instanceReady', function() {
editor.pasteFilter.disable();
} );
However disabling that filter can lead to producing very messy HTML, so be warned!
More info about paste filter is available in official documentation.
---edit:
Note that if you are pasting mainly from Word, there are also configuration options dedicated for that case: pasteFromWordRemoveFontStyles and pasteFromWordRemoveStyles.
By default, the tinymce input gets passed to the DOM as a paragraph tag:
I would like to remove that element wrapper so that tinymce passes exactly what I entered in the text editor.
How do I do that ? Please if you provide a code, can you also let me know where that code gets added ?
Regards !!!
Actually I solved my problem. All I had to do was change the styling for paragraph tag :
p {margin: 0; padding: 0;}
You need to specify the forced_root_block to false. However the documentation states that not having your root block as a <p> tag can cripple the editors behaviour. Newlines will be spaced with <br> tags instead.
tinyMCE.init({
selector: 'textarea',
forced_root_block: false
});
See the documentation here
I strip out those pesky things with gsub and regex like this:
<%= #event.desc_long.gsub(/^\<p\>/,"").gsub(/\<\/p\>$/,"") %>
First .gsub removes the <p> at the start of the TinyMCE string, and the second one removes the </p> at the end. Working great for me. This would work for any language that uses regex (gsub is for rails). JavaScript example:
var str = "{TinyMCE HTML string}";
str = str.replace(/^\<p\>/,"").replace(/\<\/p\>$/,"");
Hope this helps!
EDIT:
Re: where to put it. You leave what TinyMCE puts in your database alone. Add the above only when you display it (in the view, e-mail whatever).
In case you just want to get rid of margins:
tinymce.init({
...
setup: function(ed) {
ed.on('init', function() {
var doc = this.getDoc().getElementById("tinymce");
doc.style.margin = 0;
});
},
});
I've got a presentation running with reveal.js and everything is working. I am writing some sample code and highlight.js is working well within my presentation. But, I want to incrementally display code. E.g., imagine that I'm explaining a function to you, and I show you the first step, and then want to show the subsequent steps. Normally, I would use fragments to incrementally display items, but it's not working in a code block.
So I have something like this:
<pre><code>
def python_function()
<span class="fragment">display this first</span>
<span class="fragment">now display this</span>
</code></pre>
But the <span> elements are getting syntax-highlighted instead of read as HTML fragments. It looks something like this: http://imgur.com/nK3yNIS
FYI without the <span> elements highlight.js reads this correctly as python, but with the <span>, the language it detects is coffeescript.
Any ideas on how to have fragments inside a code block (or another way to simulate this) would be greatly appreciated.
To make fragments work in code snippets, you can now use the attribute data-noescape with the <code> tag
Source: Reveal.js docs
I got this to work. I had to change the init for the highlight.js dependency:
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() {
[].forEach.call( document.querySelectorAll( '.highlight' ), function( v, i) {
hljs.highlightBlock(v);
});
} },
Then I authored the section this way:
<section>
<h2>Demo</h2>
<pre class="stretch highlight cpp">
#pragma once
void step_one_setup(ofApp* app)
{
auto orbit_points = app-><span class="fragment zoom-in highlight-current-green">orbitPointsFromTimeInPeriod</span>(
app-><span class="fragment zoom-in highlight-current-green">timeInPeriodFromMilliseconds</span>(
app->updates.
<span class="fragment zoom-in highlight-current-green" data->milliseconds</span>()));
}
</pre>
</section>
Results:
I would try to use multiple <pre class="fragment">and change manually .reveal pre to margin: 0 auto; and box-shadow: none; so they will look like one block of code.
OR
Have you tried <code class="fragment">? If you use negative vertical margin to remove space between individual fragments and add the same background to <pre> as <code> has then you get what you want.
Result: