How can I achieve stretchy double brackets in MathJax using TeX? For example,
The TeX package stmaryrd has this but MathJax doesn't support the import of arbitrary packages.
I'd like the double brackets to look good at all sizes.
Bonus: Is this possible in AsciiMath?
The MathJax TeX fonts don't include the characters needed for these brackets. But you can get a similar effect using something like \left[\!\!\left[x^2\over 2\right]\!\!\right] or \left[\!\left[x+1\right]\!\right] or even [\![x+1]\!]. Unfortunately, the number of backspaces (\!) that you need depends on the content, so it is not easy to automate this. This is also dependent on the font in use, so if you are doing this on your own web site and using HTML-CSS (as opposed to SVG or CommonHTML output), you might want to disable the use of local STIX fonts, since the spacing would be different for that.
Alternatively, you could configure your page to use the STIX-Web fonts, which do include the needed characters (though not everyone likes the look of them), but you would also have to add the proper names and characters to the TeX delimiters list. Something like
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": {fonts: ['STIX-web']},
SVG: {font: 'STIX-Web'},
TeX: {Augment: {
Definitions: {
delimiter: {
'\\llbracket': '27E6',
'\\rrbracket': '27E7
}
}
}}
});
</script>
added just before the script that loads MathJax.js itself should do it. Note that this works for HTML-CSS and SVG output, but not CommonHTML output, since the latter only uses the MathJax TeX fonts at the moment.
Related
Ok, simple description - is it possible to define variables in an Inkscape (or general) SVG?
I would like to be able to define something like brand-color-primary as a color (with a suitable default) and then be able to re-define it externally by finding something like <color name="brand-color-primary" value="#xxyyzz"> and replacing the value.
Why? Because I could set colors like brand-color-primary, brand-color-secondary, brand-color-border, etc. If I define a transition from brand-color-primary to brand-color-secondary it will use the defined values for the colors. I could then generate a bunch of PNG files with different colors and automate selecting what looks good and what doesn't.
Basically I want to use this in a CI/CD environment with A/B testing to see what color combinations work best.
I can do this already by using 'well known values' for the things I want to change but this has problems - the 'well known values' may be used elsewhere by accident, using a name instead of a 'well known value' is a lot easier and requires less external documentation.
Is this possible? Can I define what is essentially a variable in InkScape SVG?
As Kevin remarked in his comment, svg accepts to be styled through css, so if it accepts css, why would not accept css variables too? The main notice here is that you must get all the inline styles, usually within every svg element, and place them inside style tags on de defs section of the svg code, or place them externally in a css file. to notice too that the election of one or the other method is deppendant of the goal you are pursuing.
In Inkscape, there are two ways to do this:
use custom swatches to create named colors
use CSS styles to assign styles
(This answer augments previous answers from users Moini and SIMBIOSIS)
Perhaps also use an SCSS preprocessor - in there you can define variables.
You can write for-loops in SCSS to, say, generate stepwise variations of styles, e.g., add increments of opacity.
Then style your SVG elements with CSS , by just exchanging 1 the class="" attribute.
I have made a webpage which uses a <pre> block to display text with a monospace font. I've tried the default font, as well as a bunch of ones such as "Fixedsys" or "Courier New", etc. The same result happens no matter what I do:
This is what it looks like if I use a Unicode checkmark: https://i.stack.imgur.com/Dyocg.png
This is what it looks like if I instead use a "X": https://i.stack.imgur.com/VxvRj.png
It seems as if various Unicode symbols do not respect the fixed width that each character is supposed to have with "monospace" or "fixed-width character" fonts.
I don't want to use "X" instead of the checkmark because it looks very ugly. But on the other hand, it also looks very ugly when the "columns" don't line up...
Is there anything I can do about this
Please check what fonts are actually used by the browser. For Chrome, refer to: https://makandracards.com/makandra/59967-css-how-to-find-out-the-rendered-font-in-chrome.
Two sollutions come to mind:
Find a monospaced font that supports the symbols you want to use. You might want to check you my answer here: https://stackoverflow.com/a/73313342/13663706
Apply the letter-spacing (https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) to your symbol to compensate for the 'wrong' width.
Is there any way to set white space visible for a given scope?
I'm working on modifying a color scheme to suite my liking and would like to be able to show spaces within a given scope. I haven't seen anything suggesting it's possible within the color-scheme documentation on Sublime's website.
For my specific case, and I imagine there's other useful cases, I'm working with Markdown and want to highlight a double-space line-break. I'm able to set the background, but this doesn't look quite right. I'm hoping to be able to make whitespace visible for this small scope and change the foreground color to make it stick out.
The short answer to your question is no; or rather, Yes, but only in the way that you've already discovered.
Color schemes can only apply foreground/background colors to scopes as well as bold/italic font weights. So assuming that there is a specific scope detected by the syntax you're using that is used for the things you're trying to highlight, the only thing the color scheme can do is alter the background color to make them visible.
The only thing that can render white space natively is the draw_white_space setting, which at the moment only allows you to turn it off everywhere, turn it on everywhere, or turn it on only for selected text. In this case that doesn't really help.
There are possibilities for something like this in the plugin realm though (these examples can be tested by opening the Sublime console with View > Show Console or Ctrl+` and entering the code in there; they also assume that you're using the default Markdown syntax):
view.add_regions("whitespace", view.find_by_selector("punctuation.definition.hard-line-break.markdown"), "comment", flags=sublime.DRAW_NO_FILL)
This will cause all of the hard line breaks to be outlined as if they were find results; the color is selected by the scope (which is comment here); that would make them visible without making the whole character position have a background color.
view.add_regions("whitespace", view.find_by_selector("punctuation.definition.hard-line-break.markdown"), "comment", "dot", flags=sublime.HIDDEN)
This will add a dot (colored as a comment) in the gutter for lines that end with this scope; you can also combine this with the previous example to outline them and also call attention in the gutter.
style = '<style>.w { color: darkgray; }</style>'
content = '<body id="whitespace">' + style + '<span class="w">ยทยท</span></body>'
phantom_set = sublime.PhantomSet(view, "whitespace")
phantoms = [sublime.Phantom(r, content, sublime.LAYOUT_INLINE) for r in view.find_by_selector("punctuation.definition.hard-line-break.markdown")]
phantom_set.update(phantoms)
This uses Sublime's ability to apply inline HTML phantoms into the document in order to inject a small inline sequence of two unicode center dots immediately between the actual whitespace and the text that comes before it. Here the content can be what you like if you can generate the appropriate HTML; we're just applying a color to the text in this example.
A potential downside here is that the characters you see in the inline HTML aren't considered to be part of the document flow; the cursor will skip over them in one chunk, and they're followed by the actual whitespace.
The result of this example looks like this:
Going the plugin route, you'd need an event handler like on_load() to apply these when a file is loaded and on_modified() to re-update them after modifications are made to the buffer. There may or may not be a package that already exists that has implemented this.
I am using the Extpfeil extension in Mathjax to produce arrows in my html page. In particular I am using:
\Newextarrow{\cs}{lspace,rspace}{unicode-char}
This works great for some arrows (for example, see answer by Davide), but as the documentation states:
Note that MathJax knows how to stretch only a limited number of
characters, so you may not actually get a stretchy character this way.
Unfortunately, I really need to use one of these non-supported characters (specifically, 0x21CC), and it would be very nice if I could get it to stretch. Is there a way I can manually specify an amount to stretch the arrows in a nice way? For context, I'm trying to make chemical reaction diagrams like this:
The overset and underset variables may be a few characters long, so the stretching is necessary.
The ability of MathJax to stretch a character depends on the availability of the appropriate glyphs within the font that it is using. The MathJax TeX font (the usual web-based font) doesn't have the necessary glyphs to stretch U+21CC; however, the STIX fonts do, and as of version 2.3, MathJax includes web versions of the STIX fonts. So if you are authoring your own pages and can specify the font, you could get U+21CC to stretch. But if you are using a site like StackExchange, where you can't control the font, you are limited to the font in use.
To do this, add
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": {
preferredFont: "STIX",
availableFonts: ["STIX"],
webFont: "STIX-Web"
},
SVG: {
font: "STIX-Web"
},
TeX: {
extensions: ["extpfeil.js"]
}
});
</script>
just before the script that loads MathJax.js. Then in the body of your page use
<div style="display:none">
$$\Newextarrow{\rightleftharpoons}{5,5}{0x21CC}$$
</div>
to define the arrow (somewhere early on before it is used. Then use
\rightleftharpoons[xyz]{abcdefg}
to put "abcdefg" over the arrow and "xyz" below it, and have it stretch. It looks like the vertical positioning of the under-text is not great (it is a bit too low), but the arrow stretches!
Here is an example:
I cannot use mathjax in MarkDown page as described here and here. I would like to know how to do that?
I can use mathjax in html files now.
It seems that mathjax cannot render the $$ displayformula?
You actually do have MathJax working with the first page that you cite (the other link seems to be broken). If you notice the first equation, it has been typeset by MathJax (note that its contextual menu is MathJax's). The problem is that Markdown is turning your underscores into <em> tags, and that means MathJax won't process those equations (MathJax doesn't process math that contains HTML tags).
One solution is to put spaces around your underscores, so that Markdown will ignore them.
Another would be to use backticks (`) around the math to turn it into "verbatim" mode, so Markdown won't modify its contents. That may cause the math to be enclosed in <code> tags, which MathJax will ignore. So you would need to modify your configuration to include
tex2jax: {
skipTags: ["script","noscript","style","textarea","pre"]
}
(the default has "code" in that list) so that MathJax will process the contents of <code> tags.
Addition:
Your theme styles code blocks with white text on black backgrounds, so you may want to add some additional CSS to set that back. You may be able to do that somewhere in your theme controls, but you could also add
styles: {
code: {
"font-family": "inherit",
"color": "inherit!important",
"background": "inherit!important"
}
}
to your MathJax configuration, and it will set the styles for you. Note that this will also modify how any backticked material will show up. If you want to have it only affect MathJax output, that would take more work.