Is there currently any way I can create an extension that applies a text decorator above or below the specified range which I can use to supply any HTML/CSS visual I want?
I'm still working through the API and my guess is either no, or not directly via the extensions API.
It depends on what types of decorations you are talking about. Since you used the words "text decorator" then I'm going to assume you're talking about the decoration API described here.
As you can see, there are several css properties that they officially support, but none of them "arbitrary css".
What I've done, though, in my vscode dimmer extension, is apply an opacity style using this technique:
dimDecoration = vscode.window.createTextEditorDecorationType(<vscode.DecorationRenderOptions> {
textDecoration: `none; opacity: ${opacity / 100}`
});
When vscode sees this, it basically adds text-decoration: none; opacity: 1 to the stylesheet.This allows me to use arbitrary styling.
The above snippet creates a "Decoration" which can then be applied to ranges as shown below.
function dimEditor(editor: vscode.TextEditor) {
if (!dimDecoration) return;
let startPosition = new vscode.Position(0, 0)
let endPosition = new vscode.Position(editor.document.lineCount, Number.MAX_VALUE);
editor.setDecorations(dimDecoration, [new vscode.Range(startPosition, endPosition)]);
}
Disclaimer: Of course, this isn't officially supported and they could change the way they process the arguments to stop at the first ; and anybody using this workaround would have a broken extension.
Edit:
If you're wanting to have a "hover" behavior, there is the HoverProvider api. It can take a "marked string" which is essentially markdown, and display it. This extension uses it to display img previews on hover.
If markdown will meet your needs you can try that, otherwise you can try with arbitrary HTML and see if it accepts that.
Related
I'm writing some quizzes for Moodle using R/exams' exams2moodle. The XML file is created fine and I can import the quiz to Moodle ok, however, any question that has R code as part of either the question or the solution has the R code on a dark background making it almost impossible to read. Is there an option somewhere that controls this?
I am using this code to create the XML:
exams2moodle(c("q1.Rmd", "q2b.Rmd", "q3.Rmd", "q4.Rmd", "q5.Rmd", "q6.Rmd"),
name = "GLM_prac1",
iname = FALSE,
converter = "pandoc-mathjax",
cloze = list(cloze_schoice_display = "MULTICHOICE_V"))
And this is an example of the issue:
The color of the R code displayed is not controlled through exams2moodle(), at least not explicitly. What exams2moodle() does, is to put verbatim code input and output into standard HTML tags for this <pre><code> ... </code></pre>. This stands for pre-formatted text with markup for typewriter code. (Actually, this is not even produced by exams2moodle() directly but by pandoc.)
The rendering of these standard HTML tags is then controlled through the CSS styles employed in your Moodle installation. In a vanilla Moodle installation you currently simply get a black font on the same light blueish background as for regular text. In previous versions the background was light gray. Given that you have light orange background for text and dark background for code, I guess that this is a setting in your Moodle installation. Hence I would recommend to reach out to the Moodle team at your university and ask them about this. This seems to be a poor setting that would likely affect others as well.
If you cannot get in touch with the Moodle team or they are unwilling to change their CSS, you can insert your own custom CSS code into your exercises. The advantage is that you have full control over the color then. The disadvantage is that you yourself have to include that style code into every exercise where it is needed. It is not hard but tedious. For example, you can include the following R code chunk in the exercise directly at the beginning of the question section:
Question
========
```{r, echo = FALSE, results = "asis"}
writeLines("<style>
pre {
background: #FFFFFF00
}
</style>")
```
This simply inserts a short HTML snippet with CSS into your Rmd exercise:
<style>
pre {
background: #FFFFFF00
}
</style>
This will instruct the browser to use the background color #FFFFFF00 (fully transparent white) for all <pre>-formatted chunks. Of course, you can also play around with this and use a different color, say #EEEEEE (light gray) or similar.
Hi I have several js/mootools code in a coffee file that I want to combine together as in
$$("#head").setStyle('border-right-color','#e64626');
$$("#head").setStyle('background','#e64626');
$$("#console").setStyle('border-right-color','#e64626');
$$("#console").setStyle('background','#e64626');
Is it possible to combine this into one line?
Although what #sergio gave you is the correct answer and what you wanted, it's probably the wrong thing to do (though his answer is not at fault, its the question that is off).
Setting element inline styles in JavaScript for effects is just not a very good practice. It has its uses in animation/fx but this does not seem to be the case. The reason is that it breaks cascading due to the high specificity and makes it much more difficult to revert, control or change afterwards. It also makes it harder to skin and restyle your app as there's a clear lack of separation of concerns, style in code is rigid.
You need to solve this via CSS
scenario 1: static, non mutable - not very good due to use of ID rather than classes but:
#head, #console {
border-right-color: #e6426;
background-color: #e6426;
}
scenario 2: dynamic, need to differentiate elements on some event such as click, focus, mouseover - though you can solve most of these with pseudos like :focus or :hover, then abstract this into a class:
css:
.highlight-red {
border-right-color: #e6426;
background-color: #e6426;
}
javascript:
var els = $$('#head,#console');
// on whatever event...
els.addClass('highlight-red');
// ... later
els.removeClass('highlight-red');
you will thank yourself later or your successor will or your client, whatever. this has the added benefit that next time you need to change styling or add more rules to differentiate, you have one place to go to. you can even add transitions / animation effects for evergreen browsers.
You can use setStyles() and pass it a object. You can also use , in the string you pass to $$ to select multiple elements. So it would result into:
$$("#head, #console").setStyles({
'border-right-color': '#e64626',
'background': '#e64626'
});
jsFiddle: http://jsfiddle.net/sevvtsx0/
I am using CKEditor as a back end editor on my website. It is driving me round the bend though as it seems to want to change the code to how it sees fit whenever I press the source button. For example if I hit source and create a <div>...
<div class="myclass">some content</div>
It then for no apparent reason strips the class from the <div>, so when I hit source again it has been changed to...
<div>some content</div>
I presume this irritating behaviour can be turned off in the config.js, but I have been digging and cant find anything in documentation to turn it off.
Disabling content filtering
The easiest solution is going to the config.js and setting:
config.allowedContent = true;
(Remember to clear browser's cache). Then CKEditor stops filtering the inputted content at all. However, this will totally disable content filtering which is one of the most important CKEditor features.
Configuring content filtering
You can also configure CKEditor's content filter more precisely to allow only these element, classes, styles and attributes which you need. This solution is much better, because CKEditor will still remove a lot of crappy HTML which browsers produce when copying and pasting content, but it will not strip the content you want.
For example, you can extend the default CKEditor's configuration to accept all div classes:
config.extraAllowedContent = 'div(*)';
Or some Bootstrap stuff:
config.extraAllowedContent = 'div(col-md-*,container-fluid,row)';
Or you can allow description lists with optional dir attributes for dt and dd elements:
config.extraAllowedContent = 'dl; dt dd[dir]';
These were just very basic examples. You can write all kind of rules - requiring attributes, classes or styles, matching only special elements, matching all elements. You can also disallow stuff and totally redefine CKEditor's rules.
Read more about:
Content filtering in CKEditor – why do you need content filter.
Advanced Content Filter – in deep description of the filtering mechanism.
Allowed content rules – how to write allowed content rules.
I found a solution.
This turns off the filtering, it's working, but not a good idea...
config.allowedContent = true;
To play with a content string works fine for id, etc, but not for the class and style attributes, because you have () and {} for class and style filtering.
So my bet is for allowing any class in the editor is:
config.extraAllowedContent = '*(*)';
This allows any class and any inline style.
config.extraAllowedContent = '*(*);*{*}';
To allow only class="asdf1" and class="asdf2" for any tag:
config.extraAllowedContent = '*(asdf1,asdf2)';
(so you have to specify the classnames)
To allow only class="asdf" only for p tag:
config.extraAllowedContent = 'p(asdf)';
To allow id attribute for any tag:
config.extraAllowedContent = '*[id]';
etc etc
To allow style tag (<style type="text/css">...</style>):
config.extraAllowedContent = 'style';
To be a bit more complex:
config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';
Hope it's a better solution...
Edit: this answer is for those who use ckeditor module in drupal.
I found a solution which doesn't require modifying ckeditor js file.
this answer is copied from here. all credits should goes to original author.
Go to "Admin >> Configuration >> CKEditor"; under Profiles, choose your profile (e.g. Full).
Edit that profile, and on "Advanced Options >> Custom JavaScript configuration" add config.allowedContent = true;.
Don't forget to flush the cache under "Performance tab."
Since CKEditor v4.1, you can do this in config.js of CKEditor:
CKEDITOR.editorConfig = function( config ) {
config.extraAllowedContent = '*[id](*)'; // remove '[id]', if you don't want IDs for HTML tags
}
You can refer to the official documentation for the detailed syntax of Allowed Content Rules
if you're using ckeditor 4.x you can try
config.allowedContent = true;
if you're using ckeditor 3.x you may be having this issue.
try putting the following line in config.js
config.ignoreEmptyParagraph = false;
This is called ACF(Automatic Content Filter) in ckeditor.It remove all unnessary tag's What we are using in text content.Using this command in your config.js file should be turn off this ACK.
config.allowedContent = true;
Please refer to the official Advanced Content Filter guide and plugin integration tutorial.
You'll find much more than this about this powerful feature. Also see config.extraAllowedContent that seems suitable for your needs.
Following is the complete example for CKEDITOR 4.x :
HTML
<textarea name="post_content" id="post_content" class="form-control"></textarea>
SCRIPT
CKEDITOR.replace('post_content', {
allowedContent:true,
});
The above code will allow all tags in the editor.
For more Detail : CK EDITOR Allowed Content Rules
If you use Drupal AND the module called "WYSIWYG" with the CKEditor library, then the following workaround could be a solution. For me it works like a charm. I use CKEditor 4.4.5 and WYSIWYG 2.2 in Drupal 7.33. I found this workaround here: https://www.drupal.org/node/1956778.
Here it is:
I create a custom module and put the following code in the ".module" file:
<?php
/**
* Implements hook_wysiwyg_editor_settings_alter().
*/
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
if ($context['profile']->editor == 'ckeditor') {
$settings['allowedContent'] = TRUE;
}
}
?>
I hope this help other Drupal users.
I found that switching to use full html instead of filtered html (below the editor in the Text Format dropdown box) is what fixed this problem for me. Otherwise the style would disappear.
I would like to add this config.allowedContent = true; needs to be added to the ckeditor.config.js file not the config.js, config.js did nothing for me but adding it to the top area of ckeditor.config.js kept my div classes
Another option if using drupal is simply to add the css style that you want to use. that way it does not strip out the style or class name.
so in my case under the css tab in drupal 7 simply add something like
facebook=span.icon-facebook2
also check that font-styles button is enabled
I face same problem on chrome with ckeditor 4.7.1. Just disable pasteFilter on ckeditor instanceReady.This property disable all filter options of Advance Content Filter(ACF).
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.pasteFilter.disabled = true;
});
How to save the annotation marks in flexpaper annotation document viewer?
Thanks.
FlexPaper provides a JavaScript function called getMarkList:
marksArray = JSON.stringify($FlexPaper('documentViewer').getMarkList());
You can apply the annotations again using addMarks:
var initialMarks = JSON.parse(marksArray);
$FlexPaper('documentViewer').addMarks(initialMarks);
This works for the HTML5 version but I suspect it would also apply to the Flash and HTML versions.
Ok, so I think I've found a bug in Flexpaper that prevents this from being useful (bug is in the Flash version, have not tested HTML version). If anyone has actually got this to work on Flash, please let me know!
Basically, addMark() is performing an unnecessary coordinate transformation which makes it impossible to put back in a mark that you have extracted in the same spot (this only seems to be the case for notes, drawings don't seem to have this issue).
Here's how to reproduce:
Go to http://devaldi.com/annotations/UK_Investment_Fund.php?ro=flash,html and open Chrome JS console. Enter these commands:
>> note = $FlexPaper('documentViewer').getMarkList()[2]
Object {width: 200, pageIndex: 1, height: 180, note: "The annotations plug-in allows both highlighting a…created↵↵Notes can be resized, moved and deleted.", id: "3AFE17A3-4977-3ECA-C468-70F2C40B81E8"…}
>> // Now try to add back in the same annotation
>> $FlexPaper('documentViewer').addMark(note)
>> // Notice that on the screen the note is in the wrong spot
>> // (not the same spot as the original one). Lets check the positioning
>> added_note = $FlexPaper('documentViewer').getMarkList()[6]
>> added_note.positionX
356.718192627824
>> note.positionX
-5.945303210463702
The normalize/denormalization of positions should work fine as long as you set 'displayFormat' to 'html' as part of your object creation. The normalisation process basically adjusts X/Y/Width/Height so that the document is considered to be 1000 in height. The viewer then adjusts the positions when the annotations are being displayed if the document is different in height for flash or html. It also of course considers the proportions of the width/height of the document as part of this process.
All the best
Erik on the FlexPaper Team
I'd like to know what's the syntax or the language used to format the code templates in netbeans ide. I mean, in the default templates I can see things like;
while (${EXP default="exp"})
{
${selection line}${cursor}
}
And:
// <editor-fold defaultstate="collapsed" desc="${comment}">
${selection}${cursor}// </editor-fold>
And I experimented and did this:
int ${IDX newVarName default="loop"};
for (${IDX} = 0; ${IDX} < ${SIZE int default="size"}; ${IDX}++)
{
${cursor}
}
And it works but I don't really know where the "${IDX}" or the "${SIZE int default="size"}" or the "${selection}${cursor}" comes from and what other statements can I use to format my templates.
Is this some scripting or programming language?
Where can I find this information?
I think Netbeans uses the template engine Freemarker for this. So all variables (= ${...}) are filled in by Netbeans at the time you use the template.
Unfortunately I don't have a full list of all default variables / methods you can use, but here are two of them listed:
${cursor}:
defines a position where the caret will be located after the editing
of the code template values finishes.
${selection}:
defines a position for pasting the content of the editor selection.
This is used by so-called 'selection templates' that appear as hints
whenever the user selects some text in the editor.
See here: http://wiki.netbeans.org/Java_EditorUsersGuide#How_to_use_Code_Templates
${IDX} looks like a custom variable you use.
See also:
- Code Assistance in the NetBeans IDE Java Editor: A Reference Guide (Code Template)
- Code Templates in NetBeans IDE for PHP
How_to_use_Code_Templates pretty much covers everything there is.
Looking at CodeTemplateParameter.java shows there is another hint called "completionInvoke" which requests showing of the code completion popup for the currently focused text component, but that is all.