Hi I am trying to add styles to my MathJax output. In particular I would like to set a global color for my equations (so that it matches the styles on the rest of my page). Currently I have the following configuration.
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$', '$'] ],
displayMath: [ ['$$', '$$']],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
},
messageStyle: "none",
"HTML-CSS": {
preferredFont: "TeX",
availableFonts: ["STIX","TeX"],
styles: {".MathJax" {color: "#CCCCCC";}}
}
});
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" type="text/javascript"></script>
However if I include the styles tag in my configuration the math on my page just refuses to display at all. On the other hand if I remove it, it displays fine.
Edit: I should also note that I have tried adding the styles directly to my CSS as suggested in other questions but this resulted in the same thing, no math being displayed at all.
UPDATE: I have added the : as Davide suggests below, now my equations display but the styling information is ignored. The styling seems to be inherited from the body of the page but wrapping the math in a div with different styling doesn't seem to affect it either.
UPDATE2: I have solved my the issue of the mathjax ignoring style commands. The color for text was globally set by a line in my CSS * { colour: #292929 }. This meant that the style from MathJax was being ignored. Simply changing * to body, a, p, h1, h2 fixed the issue.
You are missing the colon after ".MathJax". Your code should be
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$', '$'] ],
displayMath: [ ['$$', '$$']],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
},
messageStyle: "none",
"HTML-CSS": {
preferredFont: "TeX",
availableFonts: ["STIX","TeX"],
styles: {".MathJax": {color: "#CCCCCC"}}
}
});
</script>
and then it should work for you.
For MathJax 3.x, use:
.MJX-TEX{
color: red !important;
}
Related
We are using Vite and would like to manually load an external CSS file. Internally to the project we are using CSS modules. We need the external CSS file to load after the CSS generated by CSS modules.
In vite.config.js I have tried to add a plugin that adds the stylesheet link to the head section as follows.
function externalCSSPlugin() {
return {
name: 'external-css',
transformIndexHtml: {
enforce: 'post',
transform(html, ctx) {
return [{
tag: "link",
attrs: {"rel": "stylesheet", "type":"text/css", "href": "/*<link to css>*/"},
injectTo: "head"
}]
}
}
}
}
However, this always results in the stylesheets generated by CSS modules to be appended to the head after the external CSS:
<head>
...
<link rel="stylesheet" type="text/css" href="/public/external-css.css">
/* styles generated by CSS modules */
</head>
We don't want this, as the external CSS sets some CSS variables.
How can we force the external stylesheet to be added to the end of the head section?
The problem only occurs while using the dev server (and not in a build). Since the CSS module styles are always appended to <head> in the dev server, you can ensure your <link> is after those styles by injecting into the beginning of <body>. This should be done for the dev server only (in which case the plugin's ctx.server exists), as Vite already appends the <link> correctly to <head> in production builds:
function externalCSSPlugin() {
return {
name: 'external-css',
transformIndexHtml: {
enforce: 'post',
transform(html, ctx) {
return [{
tag: "link",
attrs: {"rel": "stylesheet", "type":"text/css", "href": "/*<link to css>*/"},
injectTo: ctx.server ? "body-prepend" : "head", 👈
}]
}
}
}
}
demo
I have been trying to learn styling in extjs, but I cannot figure out how it works. In a very simple example, I would like to apply some styles to panel header:
app.js
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
title: 'MyPanel',
cls: 'title',
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'myButton'
}, {
html: 'Hello World!!!',
}]
})
}
});
So, according to documentation I managed to change header background-color with the following css file:
app.css
.title .x-panel-header {
background-color: pink;
color: red; /* this doesn't work */
font-size: 22px; /* this doesn't work */
}
The problem is that some theme variables aren't applied correctly - for example, text color or font-size, although these variables are specified according to documentation for panel header. What am I missing?
Almost all ExtJS components have a style or cls property.
Manually overriding the extjs css classes should be the last resort.
In your case you should be looking at these components:
Ext.panel.Header
Ext.panel.Title
The panel component should have a header config and the header component should have a title config to customize each part.
Here is working example: Sencha fiddle example
For the sass variables you mentioned
They are used to customize ExtJS Themes. So if you want to make your own theme with let's say triton as base you can use these variables to create your own theme. This is quite useful if you want to make overrides for the whole theme (e.g. the background color of all Ext.panel.Panel components)
I'd recommend you to read this guide for more information on this subject: Theming guide
I'm using mathjax in a project and I've been trying to change the colors of all math. I am loading the following configuration file:
window.MathJax = {
jax: ['input/TeX', 'output/HTML-CSS'],
extensions: ['tex2jax.js'],
displayAlign: 'center',
TeX: {
extensions: ['AMSmath.js', 'AMSsymbols.js', 'AMScd.js'],
Macros: {
e: '{\\textrm{e}}',
R: '{\\mathbb{R}}', // this is working!
Z: '{\\mathbb Z}',
KK: '{\\mathbb{K}}'
}
},
tex2jax: {
inlineMath: [
['$', '$'],
['\\(', '\\)']
],
displayMath: [
['$$', '$$'],
['\\[', '\\]']
],
processEscapes: true
},
'HTML-CSS': {
fonts: ['TeX'],
styles: {
scale: 110,
'.MathJax': { padding: '1em 0.1em', color: 'green ! important' }, //Not working
'.MathJax_Display': { 'text-align': 'center' }
}
},
showProcessingMessages: false,
menuSettings: { zoom: 'Double-Click', mpContext: true, mpMouse: true }
}
Everything is apparently working but the HTML-CCS:styles part is not working. I couldn't find a proper reference for this, and I don't know if this version of MathJax (2.7.8) is using a different format.
In this project I'm using nuxt and vuetify, I don't know if this is the problem, but I turn off vuetify and still the styles are not applied to the math display.
Thanks very much for any help,
Milton.
The scale: 110 parameter is not a CSS declaration, so should not be in the styles block (but rather in the HTML-CSS block directly). I suspect that that may be causing the styles not to be generated properly. Try moving the scale up one level and see if that helps.
Note that the HTML-CSS output jax is the slowest one available. You might consider switching to the CommonHTML output jax instead.
I finally found what was the problem. Apparently the new versions of Mathjax changed the name of the CSS classes. The following configuration now works:
Update: Now I'm facing a different problem...that configuration only works in developing mode, when deploy the mathjax css is not working...in that case I think it is the vuetify css. :-(
Update: Now it is working, also in deployed mode. I was loading Mathjax with a the pre-configuration ?config=TeX-AMS-MML_SVG. When I load it without that pre-configuration it works. I don't know why.
window.MathJax = {
jax: ['input/TeX', 'output/CommonHTML'],
extensions: ['tex2jax.js', 'Safe.js'],
styles: {
'.mjx-chtml': { padding: '0.1em 0.1em' }, //new names of the selectors, working!
'.MJXc-display, .mjx-chtml': { color: 'green' }
},
displayAlign: 'center',
TeX: {
extensions: ['AMSmath.js', 'AMSsymbols.js', 'AMScd.js'],
Macros: {
e: '{\\textrm{e}}',
R: '{\\mathbb{R}}',
Z: '{\\mathbb Z}',
KK: '{\\mathbb{K}}'
}
},
tex2jax: {
inlineMath: [
['$', '$'],
['\\(', '\\)']
],
displayMath: [
['$$', '$$'],
['\\[', '\\]']
],
processEscapes: true
},
CommonHTML: {
scale: 105,
linebreaks: { automatic: true }
},
showProcessingMessages: false,
menuSettings: { zoom: 'None', mpContext: true, mpMouse: true }
}
Note that styles are in the core configurations, outside the CommonHTML item.
Thanks for the help!
Milton.
I'm using pdfmake. I want to format a document and they have good examples on github and in their playground but I was wondering if they featured all capabilities therein. I get the feeling that their may be additional properties like switching fonts, adding different style elements or underlining - things not expressly shared in the examples. Maybe what you see is what you get and that is all but I went over the github page pretty throughly and did not find a more detailed list of capabilities. It seems hella similar to html but it doesn't seem to have the same styling capabilities of html/css, if there is something more could someone please point it out.
Here you go.. At least, uncommented below styles are supported. I tried it myself.
['font',
'fontSize',
'bold',
'italics',
'alignment',
'color',
'columnGap',
'fillColor',
'decoration',
'decorationStyle',
'decorationColor',
'background',
'lineHeight'
//'tableCellPadding'
// 'cellBorder',
// 'headerCellBorder',
// 'oddRowCellBorder',
// 'evenRowCellBorder',
// 'tableBorder'
]
You could use the above styles, as below.
var dd = {
content: [
{
text: 'This is a header, using header style',
style: 'header'
}
],
styles: {
header: {
fontSize: 18,
bold: true,
background: '#ff1'
}
}
}
You can use margin also as shown below.
// margin: [left, top, right, bottom]
{ text: 'sample', margin: [ 5, 2, 10, 20 ] },
// margin: [horizontal, vertical]
{ text: 'another text', margin: [5, 2] },
// margin: equalLeftTopRightBottom
{ text: 'last one', margin: 5 }
It is from the docs Here.
Update: 27/5/2020 from Github's anwer
Extending #Romo 's answer:
[
'font',
'fontSize',
'bold',
'italics',
'alignment',
'color',
'columnGap',
'fillColor',
'decoration',
'decorationStyle',
'decorationColor',
'background',
'lineHeight'
'listType' // <=== Added
]
It accepts several options:
'none', 'upper-roman', 'circle', 'square'
I'm using TinyMCE 4. Unfortunately the "backcolor" control seems to only allow changes to text, not a whole paragraph. Even when I select a paragraph in the status bar of TinyMCE and apply a background color, it's only applied to the inner span, not the paragraph itself. I would need to set the background color for the complete content, not only parts of it. This should be applied to the HTML output, something like
<div style="background-color: #f00">[complete editor content]</div>
Thanks for any help.
You can use this code to access the tinymce's body to set background color:
tinymce.activeEditor.getBody().style.backgroundColor = '#<yourcolor>';
Disadvantage: Setting the background color that way will not change/affect the html content inside the editor. So you have to treat/update/store that value in a separate way.
You can also add a button on initialising tinymce:
tinymce.init({
...
setup: function (editor) {
editor.addButton('mybutton', {
text: 'Set bgColor',
icon: false,
onclick: function () {
editor.getBody().style.backgroundColor = '#E5FFCC';
}
});
...
});
You have to reach the editable content body in the dynamically generated iframe. The iframe is generated after the initialization of the editor.
If your textarea id is foo, the id of the iframe is foo_ifr.
You may also open the editor with firebug or developer tools and use dom explorer, you may see the inner dynamically generated components.
use:
var iframe = document.getElementsByTagName("iframe")[0];
// or
var iframe = document.getElementsById("foo_ifr");
// check if iframe.contentDocument is cross-browser, i tested with IE 11.
var innerBody = iframe.contentDocument.getElementsByClassName("mceContentBody")[0];
innerBody.style.backgroundColor="red";
To get the custom styling that you want, you have to create new custom style formats when the editor is being initialized. This gives you the ability to define css styling to the element. For example
HTML
<form>
<textarea></textarea>
</form>
JS
tinymce.init({
selector: 'textarea',
//merge with default formats
style_formats_merge: true,
//set up custom style formats
style_formats: [
{title: 'Red Background', block: 'p', styles: {
'background-color': '#ff0000',
'color':'white',
'padding': '7px'}
},
{title: 'Blue Background', block: 'p', styles: {
'background-color': '#0000ff',
'color':'white',
'padding': '7px'}
}
]
});
This merges two new custom formats with the default formats. See this DEMO