In WebStorm in html file I select a text and do Ctrl + Alt + J and get "no surround templates defined in this context".
What do I wrong in it?
<i class="link to-be-copied">$SELECTION$</i>
Related
I am using bookdown for a documentation which is outputted with bookdown::gitbook and bookdown::pdf_book.
In my Rmd files, I am using a div to wrap around notes and warnings styled with a css file. For example:
<div class="note">
This is a note.
</div>
Obviously, HTML and CSS is ignored when generating the PDF file. I was wondering if there is a way to "inject" a small script that would replace the div with, for example, a simple prefix text.
Or, is there another way to have it formatted in HTML and in the PDF without littering my file by adding something lengthy every time like:
if (knitr::is_html_output(excludes='epub')) {
cat('
<div class="note">
This is a note.
</div>
')
} else {
cat('Note: This is a note.')
}
I could also style blockquotes as described here but it is not an option as I still need blockquotes.
The appropriate way to do this is to use a fenced div rather than inserting HTML directly into your markdown and trying to parse it later with LUA. Pandoc already allows you to insert custom styles and process them to both file types. In other words, it will take care of creating the appropriate HTML and LaTeX for you, and then you just need to style each of them. The Bookdown documentation references this here, but it simply points to further documentation here, and here.
This method will create both your custom classed div in html and apply the same style name in the LaTeX code.
So, for your example, it would look like this:
::: {.note data-latex=""}
This is a note.
:::
The output in HTML will be identical to yours:
<div class="note">
<p>This is a note.</p>
</div>
And you've already got the CSS you want to style that.
The LaTeX code will be as follows:
\begin{note}
This is a note.
\end{note}
To style that you'll need to add some code to your preamble.tex file, which you've already figured out as well. Here's a very simple example of some LaTeX that would simply indent the text from both the left and right sides:
\newenvironment{note}[0]{\par\leftskip=2em\rightskip=2em}{\par\medskip}
I found this answer on tex.stackexchange.com which brought me on the right track to solve my problem.
Here is what I am doing.
Create boxes.lua with following function:
function Div(element)
-- function based on https://tex.stackexchange.com/a/526036
if
element.classes[1] == "note"
or element.classes[1] == "side-note"
or element.classes[1] == "warning"
or element.classes[1] == "info"
or element.classes[1] == "reading"
or element.classes[1] == "exercise"
then
-- get latex environment name from class name
div = element.classes[1]:gsub("-", " ")
div = div:gsub("(%l)(%w*)", function(a, b) return string.upper(a)..b end)
div = "Div"..div:gsub(" ", "")
-- insert element in front
table.insert(
element.content, 1,
pandoc.RawBlock("latex", "\\begin{"..div.."}"))
-- insert element at the back
table.insert(
element.content,
pandoc.RawBlock("latex", "\\end{"..div.."}"))
end
return element
end
Add pandoc_args to _output.yml:
bookdown::pdf_book:
includes:
in_header: latex/preamble.tex
pandoc_args:
- --lua-filter=latex/boxes.lua
extra_dependencies: ["float"]
Create environments in preamble.tex (which is also configured in _output.yml):
I am using tcolorbox instead of mdframed
\usepackage{xcolor}
\usepackage{tcolorbox}
\definecolor{notecolor}{RGB}{253, 196, 0}
\definecolor{warncolor}{RGB}{253, 70, 0}
\definecolor{infocolor}{RGB}{0, 183, 253}
\definecolor{readcolor}{RGB}{106, 50, 253}
\definecolor{taskcolor}{RGB}{128, 252, 219}
\newtcolorbox{DivNote}{colback=notecolor!5!white,colframe=notecolor!75!black}
\newtcolorbox{DivSideNote}{colback=notecolor!5!white,colframe=notecolor!75!black}
\newtcolorbox{DivWarning}{colback=warncolor!5!white,colframe=warncolor!75!black}
\newtcolorbox{DivInfo}{colback=infocolor!5!white,colframe=infocolor!75!black}
\newtcolorbox{DivReading}{colback=readcolor!5!white,colframe=readcolor!75!black}
\newtcolorbox{DivExercise}{colback=taskcolor!5!white,colframe=taskcolor!75!black}
Because I have also images and tables within the boxes, I run into LaTeX Error: Not in outer par mode.. I was able to solve this issue by adding following command to my Rmd file:
```{r, echo = F}
knitr::opts_chunk$set(fig.pos = "H", out.extra = "")
```
How could I get rid of the WebStorm (re-format) indentation?
// Expected
template: $template(
'<div>' +
'<label> {{currentLength}} </label> ' +
'</div>'
)
// Not expected, after applying WebStorm auto format(indentation)
template: $template(
'<div>' +
'<label> {{currentLength}} </label> ' +
'</div>')
I don't think this will be possible to implement in the form you're suggesting – indenting the parent language expressions (JavaScript) in order to adhere to indenting rules for child (HTML) language. As a workaround, you can turn your multiline string into a template string (with backticks) and add //language=HTML comment to get HTML injected and auto-formatted:
//language=HTML
template: $template(
`<div>
<label> {{currentLength}} </label>
</div>`)
After further analysis, I have found that problem is while rendering webpage OR XSL file.
When I do "View Source" I find that in URL "?" is replaced with " ".
I mean, I have written a line in XSL as something.asp?name=sameer but when i do "View Source", same line is displayed as something.asp name=sameer
This happens only if Windows locale is Chinese. It does not happen with English
I have a directory full of Classic ASP legacy code, and almost all files have something similar to this:
<input type="hidden" name="driverPayment" value="<% =driverPayment %>">
Then later in the code, some JavaScript is running, and doing the following:
var x = document.getElementById('driverPayment')
This works fine in IE, but of course doesn't work anywhere else because there is no ID attribute defined.
The fix is to go through the 1770 files and manually add an ID attribute that matches the name property on the input. So make it like so:
<input type="hidden" name="driverPayment" id="driverPayment" value="<% =driverPayment %>">
Is there a way I can automate this process by using the logic below:
Get input element with a name attribute
If input has id attribute, move to next input
Else add an ID attribute to the input, and give it a name matching the value of the name attribute
I'd like to do this for the 1770 Classic ASP files I have. I am using Sublime Text.
You can use regex to match. My regex isn't great but the following should work. Happy for others to improve on it. I used some regex from this question.
Right Click project folder
Choose "Find in folder" option
Find and replace options appear at bottom of screen. Select the regex option (far left).
Enter
<(?:input)\s+(?=[^>]*\bname\s*=)(?![^>]*\bid\s*=)[^>]*>?(name="driverPayment")
in Find field
Enter
id="driverPayment" name="driverPayment"
in Replace field
Click Replace
Hi i just put up a validation function in jScript to validate filename in fileupload control[input type file]. The function seems to work fine in FF and sometimes in ie but never in Chrome. Basically the function tests if File name is atleast 1 char upto 25 characters long.Contains only valid characters,numbers [no spaces] and are of file types in the list. Could you throw some light on this
function validate(Uploadelem) {
var objRgx = new RegExp(/^[\w]{1,25}\.*\.(jpg|gif|png|jpeg|doc|docx|pdf|txt|rtf)$/);
objRgx.ignoreCase = true;
if (objRgx.test(Uploadelem.value)) {
document.getElementById('moreUploadsLink').style.display = 'block';
} else {
document.getElementById('moreUploadsLink').style.display = 'none';
}
}
EDIT:
Nope still does not seem to work , i am using IE 8(tried all the compatibility modes), Chrome v8.0, FF v 3.6.
Here is a html snippet in which i wired up the validate function,
<div>
<input type="file" name="attachment" id="attachment" onchange="validate(this)" />
<span class="none">Filename should be within (1-25) letters long. Can Contain only letters
& numbers</span>
<div id="moreUploads">
</div>
<div id="moreUploadsLink" style="display: none;">
Attach another File</div>
</div>
It works perfectly for me. How do you call the validate function ? – M42
You tried this on Google Chrome and IE 8 ? i added HTML Snippet in where in i used all of the recommended regX. No Clues as to why doesn't work!!
Mike, i am unable to comment your post here So this is for you.
The Validation Fails for which ever file i choose in the html input. I Also wired the validation in onblur event but proves same. The validate function will mimic the asp.net regular expression validator which displays validation error message when regular expression is not met.
Try simplifying your code.
function validate(Uploadelem) {
var objRgx = /^[\w]{1,25}\.+(jpg|gif|png|jpeg|doc|docx|pdf|txt|rtf)$/i;
if (objRgx.test(Uploadelem.value)) {
document.getElementById('moreUploadsLink').style.display = 'block';
} else {
document.getElementById('moreUploadsLink').style.display = 'none';
}
}
Your specification is hazy, but it appears that you want to allow dots within filenames (in addition to the dot that separates filename and extension).
In that case, try
var objRbx = /^[\w.]{1,25}\.(jpg|gif|png|jpeg|doc|docx|pdf|txt|rtf)$/i;
This allows filenames that consist only of the characters a-z, A-Z, 0-9, _ and ., followed by a required dot and one of the specified extensions.
As far as I know, Chrome adds a path in front of the filename entered, so you have just to change your regex from:
/^[\w]{1,25}\.*\.(jpg|gif|png|jpeg|doc|docx|pdf|txt|rtf)$/
to:
/\b[\w]{1,25}\.+(jpg|gif|png|jpeg|doc|docx|pdf|txt|rtf)$/
SOLVED
Primary reason that all [CORRECT regx pattern] did not work is Different browsers returned different values for HTML File Input control.
Firefox: Returns the File Upload controls FileName {As Expected}
Internet Explorer: Returns the Full Path to the File from Drive to File [Pain in the Ass]
Chrome: Returns a fake path as [C:\FakePath\Filename.extension]
I got a solution to the thing for chrome and FF but not IE.
Chrome and Firefox:
use FileUploadControlID.files[0].fileName or FileUploadControlID.files[0].name
IE
Again biggest pain in the ass [someone suggest a solution]
Valid Regex to Validate both fileName and Extension would be:
/\b([a-zA-Z0-9._/s]{3,50})(?=(\.((jpg)|(gif)|(jpeg)|(png))$))/i
1.File Nameshould be between 3 and 50 characters
2. Only jpg,gif,jpeg,png files are allowed