I want to create an editor with ace + katex. Problem is that double dollars sign does not compiles correctly
For example:
Good
$$\mathcal D = 25+4\cdot6\cdot1=49=7^2$$
Bad
$$
\mathcal D = 25+4\cdot6\cdot1=49=7^2
$$
Katex render options:
renderMathInElement(this.katexView, { delimiters: [
{left: "$$", right: "$$", display: true},
{left: "$", right: "$", display: false},
]});
Found my mistake, I inserted text for katex node via innerText, but katex need innerHTML
Why not use directly the equation / align environments?
\begin{equation}
\mathcal D = 25+4\cdot6\cdot1=49=7^2
\end{equation}
Or simply
\[
\mathcal D = 25+4\cdot6\cdot1=49=7^2
\]
Related
I often use markers to underline a part of code (e.g., to invite users to hover on it and see hints). Most of time, we want to underline at least one characters. But sometimes, we may want to underline the position between two characters. For instance, given a formula fg(23,), I want to underline the position between , and ), then hovering on it shows a non-empty argument is expected here.
It seems that the following code in the playground can achieve this more or less.
var ed = monaco.editor.create(document.getElementById("container"), {
value: "fg(23,)",
language: "javascript"
});
monaco.editor.setModelMarkers(ed.getModel(), 'test', [{
startLineNumber: 1,
startColumn: 7,
endLineNumber: 1,
endColumn: 7,
message: "a non-empty argument is expected here",
severity: 8
}])
However, setting startColumn same as endColumn does not always do the trick. For instance, I cannot underline the position between ( and 2; setting startColumn: 4, endColumn: 4 does not work.
So does anyone know how to mark a position between 2 characters? We are not limited to underlining, other ways like highlighting are welcomed as well.
(* Link on GitHub: https://github.com/microsoft/monaco-editor/issues/3039 *)
To your question: following this post, it seems that a solution may look something like this (please use the playground to test)
HTML
<div id="container" style="height: 100%"></div>
CSS
.formulaHighlight { /* this class name can be whatever you want */
color: #3456ff !important;
cursor: pointer;
text-decoration: underline;
font-weight: bold;
font-style: oblique;
}
JS
const ed = monaco.editor.create(document.getElementById("container"), {
value: "fg(23,)",
language: "javascript"
});
monaco.editor.setModelMarkers(ed.getModel(), 'test', [{
startLineNumber: 1,
startColumn: 7,
endLineNumber: 1,
endColumn: 7,
message: "a non-empty argument is expected here",
severity: 8
}])
const decorations = ed.deltaDecorations(
[],
[
{
range: new monaco.Range(1, 4, 1, 6),
options: { inlineClassName: 'formulaHighlight' }
}
]
);
The delta decoration method allow to customize styles in specific locations. The monaco.Range method uses the following parameters:
startLineColumn - from which line to start the highlight
startColumn - the numeric value of the first highlight character
endLineNumber - which line stops the highlight
endColumn - the numeric value of last highlighted character
In your case it seems that startLineColumn and endLineNumber will be the same line number. Also,startColumn and endColumn will represent the actual highlight range (within the same line)
I finally got my html2pdf to work showing my web page just how I want it in the pdf(Any other size was not showing right so I kept adjusting the format size until it all fit properly), and the end result is exactly what I want it to look like... EXCEPT even though my aspect ratio is correct for a landscape, it is still using a very large image and the pdf is not standard letter size (Or a4 for that matter), it is the size I set. This makes for a larger pdf than necessary and does not print well unless we adjust it for the printer. I basically want this exact image just converted to a a4 or letter size to make a smaller pdf. If I don't use the size I set though things are cut off.
Anyway to take this pdf that is generated and resize to be an a4 size(Still fitting the image on it). Everything I try is not working, and I feel like I am missing something simple.
const el = document.getElementById("test);
var opt = {
margin: [10, 10, 10, 10],
filename: label,
image: { type: "jpeg", quality: 0.98 },
//pagebreak: { mode: ["avoid-all", "css"], after: ".newPage" },
pagebreak: {
mode: ["css"],
avoid: ["tr"],
// mode: ["legacy"],
after: ".newPage",
before: ".newPrior"
},
/*pagebreak: {
before: ".newPage",
avoid: ["h2", "tr", "h3", "h4", ".field"]
},*/
html2canvas: {
scale: 2,
logging: true,
dpi: 192,
letterRendering: true
},
jsPDF: {
unit: "mm",
format: [463, 600],
orientation: "landscape"
}
};
var doc = html2pdf()
.from(el)
.set(opt)
.toContainer()
.toCanvas()
.toImg()
.toPdf()
.save()
I have been struggling with this a lot as well. In the end I was able to resolve the issue for me. What did the trick for me was setting the width-property in html2canvas. My application has a fixed width, and setting the width of html2canvas to the width of my application, scaled the PDF to fit on an A4 paper.
html2canvas: { width: element_width},
Try adding the above option to see if it works. Try to find out the width of your print area in pixels and replace element_width with that width.
For completeness: I am using Plotly Dash to create web user interfaces. On my interface I include a button that when clicked generates a PDF report of my dashboard. Below I added the code that I used for this, in case anybody is looking for a Dash solution. To get this working in Dash, download html2pdf.bundlemin.js and copy it to the assets/ folder. The PDF file will be downloaded to the browsers default downloads folder (it might give a download prompt, however that wasn't how it worked for me).
from dash import html, clientside_callback
import dash_bootstrap_components as dbc
# Define your Dash app in the regular way
# In the layout define a component that will trigger the download of the
# PDF report. In this example a button will be responsible.
app.layout = html.Div(
id='main_container',
children = [
dbc.Button(
id='button_download_report',
children='Download PDF report',
className='me-1')
])
# Clientside callbacks allow you to directly insert Javascript code in your
# dashboards. There are also other ways, like including your own js files
# in the assets/ directory.
clientside_callback(
'''
function (button_clicked) {
if (button_clicked > 0) {
// Get the element that you want to print. In this example the
// whole dashboard is printed
var element = document.getElementById("main_container")
// create a date-time string to use for the filename
const d = new Date();
var month = (d.getMonth() + 1).toString()
if (month.length == 1) {
month = "0" + month
}
let text = d.getFullYear().toString() + month + d.getDay() + '-' + d.getHours() + d.getMinutes();
// Set the options to be used when printing the PDF
var main_container_width = element.style.width;
var opt = {
margin: 10,
filename: text + '_my-dashboard.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 3, width: main_container_width, dpi: 300 },
jsPDF: { unit: 'mm', format: 'A4', orientation: 'p' },
// Set pagebreaks if you like. It didn't work out well for me.
// pagebreak: { mode: ['avoid-all'] }
};
// Execute the save command.
html2pdf().from(element).set(opt).save();
}
}
''',
Output(component_id='button_download_report', component_property='n_clicks'),
Input(component_id='button_download_report', component_property='n_clicks')
)
I am using a data api that is returning text like so (from an archaic database):
I’m attaching a couple of our “quick look� cards covering the process
Notice the ’ symbols in the text. It appears that perhaps the user had copy and pasted text from an email message (outlook) or Microsoft Word and it appears to be a replacement for a comma or apostrophe (or who knows what else)?
Looks like this is what needs to be replaced:
[{broken: '–', fixed: "—"}
{broken: "—", fixed: "–"}
{broken: "‘", fixed: "‘"}
{broken: "’", fixed: "’"}
{broken: "“", fixed: "“"}
{broken: "â€", fixed: "”"}, ...]
Is there something I can do on the front end to replace those symbols with the correct character?
This sounds like an encoding problem and is described here and is, as you also described, reduced to a few characters:
The following characters fail, while other characters display
correctly:
€ ‚ ƒ „ … † ‡ ˆ ‰ Š ‹ Œ Ž ‘ ’ “ ” • – — ˜ ™ š › œ ž Ÿ.
There is also a debug sheet to find out the expected characters in UTF-8.
So maybe a solution would be to replace these list of characters after getting the data from the API or handling it with a function.
I made a fiddle with replaces that chars with the function replaceEncodingErrorCharsInString() :
new Vue({
el: "#app",
data: {
encodingReplacement: [
{
broken: '–',
fixed: "—"
},
{
broken: "—",
fixed: "–"
}, {
broken: "‘",
fixed: "‘"
}, {
broken: "’",
fixed: "’"
}, {
broken: "“",
fixed: "“"
}, {
broken: "â€",
fixed: "”"
}],
exampleTexts: [
"This is – !",
"This is — !",
"This is ‘ !",
"This is ’ !",
"This is “ !",
"This is – !"
]
},
methods: {
replaceEncodingErrorCharsInString: function(text){
for(let i=0; i < this.encodingReplacement.length; i++) {
// string contains "broken" chars
if(text.includes(this.encodingReplacement[i].broken)) {
text = text.replace(this.encodingReplacement[i].broken, this.encodingReplacement[i].fixed)
}
}
// string is fine, just return it
return text
}
}
})
I have added a print button and a PrintDialog to my custom app and now need to write a print function.
Do I need to open up a new window and build a table containing the grid data formatted with css styles fitted to A4 paper size or is there something built into Rally that I can use?
I am new to Rally and Ext JS, so any advice would be appreciated!
Ext.create('Rally.ui.dialog.PrintDialog', {
height: 250,
autoShow: true,
autoCenter: false,
shouldShowFormatOptions: false,
defaultTitle: 'Book Of Work Report',
listeners: {
print: function(event) {
//How do I print a grid?
},
To print the grid, I created a Rally.data.WsapiDataStore and loaded the store into an array. I passed this array(StoreData) to the below function which opens a print window displaying the grid in a table.
_printDetails: function(Storedata) {
var myData = Storedata;
var htmlTable ='<table>';
htmlTable +='<width="100%">';
var r,c;
for(r= 0 ; r<myData.length; r++){
htmlTable+= '<tr>';
for(c = 0 ; c<myData[0].length; c++){
htmlTable+='<td>'+myData[r][c]+'</td>';
}
htmlTable+='</tr>';
}
htmlTable+='</table>';
var cssTable = '<style type="text/css">';
cssTable +='table {border-collapse:collapse;...}';
cssTable +='th {color:#080808;border-bottom-style: solid; ...}';
cssTable +='tr {color:#000000; border-bottom-style: solid; ..}';
cssTable +='td {padding:3px 4px; text-align:left; vertical-align:top;}';
cssTable +='#filter {text-align:left; ...}';
cssTable += '</style>';
var printwindow=window.open('', '', 'width=1000,height=500');
var myDate = new Date;
printwindow.document.write('<div id="todayDate">' + Ext.Date.format(myDate,'F j, Y, g:i a') + '</div>');
printwindow.document.write('<div id="header">Book Of Work Report</div>');
printwindow.document.write('<div id="filter"><p>' + this._GetFilterString() + '</p></div>');
printwindow.document.write(htmlTable);
printwindow.document.write(cssTable);
printwindow.document.close();
printwindow.focus();
printwindow.print();
printwindow.close();
},
Your inclination is correct - the best option here is to open a window that you populate with table output/grid content and apply whatever CSS formatting you prefer. Rally doesn't have any server-side printing output functionality (at least that is exposed to AppSDK2).
I'm trying to assign the following HTML as a value to variable type string
'here's the tag
'$("#close").click(function(){$.notifyBar({ html: "Click 'close' to hide notify bar", close: true, delay: 1000000 });});
Dim htmltag = "$("#close").click(function(){$.notifyBar({ html: "Click 'close' to hide notify bar", close: true, delay: 1000000 });});"
I got a lot error message about the quotation in the string.
You need to use escape characters on the quotations otherwise they break the variable input. The VB.net escape for quotations is double quote:
Dim htmltag = "$(""#close"").click(function(){$.notifyBar({ html: ""Click 'close' to hide notify bar"", close: true, delay: 1000000 });});"
In your example, the compiler would see the string as:
Dim htmltag = "$("
With lots of unknown stuff after it!
Other languages have different escape characters, javascript for example is backslash.