atom <script> snippet, one line - atom-editor

I would like the atom script snippet when I type "script" followed by TAB to be one line instead of as now:
<script type="text/javascript">
</script>
I am not sure how to add such a custom snippet to the cson file. I also tried to find the original snippet for it under %LocalPackage% but not sure where it is.
Thanks in advance ☕

You can add something like this to your snippets.cson file:
'.text.html.basic':
'script (one line)':
'prefix': 'script'
'body': '<script${1: type="${2:text/javascript}"}>$3</script>'
The snippet has the same tab stops / general behavior as the multi-line script snippet it's overriding. Feel free to customize.

Related

Adding a class to code blocks generated by knitr

When I knit my R markdown file to HTML via the RWordPress package, the formatting of the <pre> and <code> tags is disrupted because of other styling/plugins (I think Crayon syntax highlighter is the biggest culprit, but I'm not willing to part with it). One simple solution might be to add a class to every <pre> and <code> tag generated by Knitr, so that they can be styled separately with some CSS, but I can't determine an easy way to do this. Do any Knitr experts know how this could be done automagically? Other solutions are welcome if they are similarly simple.
EDIT: To possibly clarify, I think that what I need to be doing is overriding the default 'source' hook generated by render_html() and add a new tag that way, but I'm struggling to figure out how by reading the documentation or the examples.
You could use jQuery inside your Rmd document (which will be rendered to HTML) to add a class to every source code chunk:
<script>
$(document).ready(function () {
$('pre.r').addClass('yourClass');
});
</script>
This snippet adds the CSS class .yourClass to every <pre> element that already carries the class .r.
If you want to modify the <code> child of those elements use
<script>
$(document).ready(function () {
$('pre, .r').children('code').addClass('yourClass');
});
</script>
From here on it is up to you how you style your yourClass code chunks with CSS.

Using external scripts in Meteor executed from "script src"

I want to use a script on my web site and I know that I must put all scripts separated from the template in a .js file. But I don't know how to do it this time when the script is executed directly in the script src:
<script type="text/javascript" src="http://svenskfotboll.se/widget.aspx?scr=table&ftid=39662&b1=%23006bb7&f1=%23ffffff&b2=%23bfd4f3&f2=%23000000&b3=%23ffffff&f3=%23000000&b4=%23ececec&bo=%23ffffff&s=1"></script>
What is the best practice to get it to work in Meteor?
I'd go to that url, get that script, and save it in a file in your project. However, there wasn't anything actually at that url when I just checked it out. That would definitely be a problem too :)
EDIT: You can also stick in the head tag.
EDIT 2: if you want it to display in a template, like if it's a widget such as yours, you can insert it manually every time the template re-renders. It's pretty simple, actually. First we've got the template code:
Template.myWidget.rendered = function () {
$('#my-widget').html('<script src="src-here.js"></script');
}
And then the actual template:
<template name="myWidget">
<div id="my-widget">Loading...</div>
</template>
Finally, wherever you want the widget to appear in your html, just insert {{>myWidget}}
Use jQuery.getScript(): http://api.jquery.com/jquery.getscript/
In your case:
$.getScript( "http://svenskfotboll.se/widget.aspx?scr=table&ftid=39662&b1=%23006bb7&f1=%23ffffff&b2=%23bfd4f3&f2=%23000000&b3=%23ffffff&f3=%23000000&b4=%23ececec&bo=%23ffffff&s=1" );
You can also specify callback for success or failure (please see documentation linked above).

PWI - Picasa Webalbum Integrator and jQuery.noConflict()?

I have a Problem with the following script: http://code.google.com/p/pwi/
This is a very nice Picasa jQuery Gallery!
Can someone please tell me how i run this script in jQuery.noConflict() mode? I have already added the line...
<script>jQuery.noConflict()</script>
...in the HTML file and replace all $ with jQuery. But then the script doesn't work anymore.
Nobody can help me? I have the Demo 1 from this ZIP file
with fancybox.
Normally i need only replace $ with jQuery in the .html and .js files, and then add the jQuery.noConflict() to the head. But here doesn't work...
The error console in Firefox says:
Error: TypeError: n.gphotojQuerytimestamp is undefined
Source file: file:///C:/Users/pc/Desktop/jquery.pwi/js/jquery.pwi.js
Line: 361
Looking at the page from jQuery (http://api.jquery.com/jQuery.noConflict/) you can use two methods.
I did a quick test, and it looks like you can use the second method. If you modify Demo1 like this:
In the script section where PWI is initialized add these lines before var $viewerSelected = "fancybox";:
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses other library's $ can follow here.
Just before the closing end-script tag add the lines
});
// Code that uses other library's $ can follow here.
This at least makes sure that the code is still running without errors

Open a link in a new window in reStructuredText

I want to open a link in a new window using reStucturedText. Is this possible?
This opens link in the same window:
You can `check your location here. <http://geoiptool.com>`_
To open a page in a new window or tag you can add the attribute target="_blank" to your hyperlink although I'm not sure how you can add attributes to inline hyperlinks in reStructuredText. However, from the Docutils FAQ, is nested inline markup possible, you can use the raw directive to include raw HTML into your document, for example
You can |location_link|.
.. |location_link| raw:: html
check your location here
Update to address comments
I've had the question "why does reStructuredText not have [insert some awesome feature]".
In this case, "why does reStructuredText not have a way to specify how links are opened" — I think reStructuredText doesn't have an easy way of doing this since the behaviour of how clicking a link works isn't really it's responsibility. reStructuredText transforms markup — how that markup is ultimately displayed is not up to reStructuredText, but whatever browser or viewer the user chooses to use.
In the case of opening a link in a web browser, good useability practice dictates that you should not force a user to open a link in a new tab (which is what adding target="_blank" is doing). Rather, you should leave the choice of how to open the link up to the user. If a user wants to open a link in a new tab, then they can use their middle mouse button (or whatever their favourite shortcut key is).
So I think that it is perfectly acceptable that reStructureText does not have an easy target="_blank" feature. The fact that it is possible is nice for people who really want to do this is good, and the fact that it is a bit of pain to do so is good for discouraging this practice.
If you don't want to modify the theme, you can do what Ivonet did but with a custom.js file in the _static/js folder, then adding it to the conf.py like this:
html_js_files = [
'js/custom.js'
]
Leave out the html tags in _static/js/custom.js if you do this:
$(document).ready(function () {
$('a[href^="http://"], a[href^="https://"]').not('a[class*=internal]').attr('target', '_blank');
});
This will also work if you'd like a shorter version.
$(document).ready(function () {
$('a.external').attr('target', '_blank');
});
I agree completely with the accepted answer, especially with the part where reStructuredText is not responsible for how a link behaves.
I still want it though so it should be solved in the theme. As I want all my external links to open in a new tab it becomes very cumbersome to do it as described above.
In my case I use a third party theme (sphinx_rtd_theme) and I put the following script near the end of the layout.html:
<script type="text/javascript">
<!-- Adds target=_blank to external links -->
$(document).ready(function () {
$('a[href^="http://"], a[href^="https://"]').not('a[class*=internal]').attr('target', '_blank');
});
</script>
It seems to do the job just fine.
Hope it helps.
I recommend that you should use JavaScript to set target="_blank" for each external links.
See https://github.com/sphinx-doc/sphinx/issues/1634

How to add code area css style to HTML

I am trying to create a blog in wordpress. Since I might need to add some code blocks to my posts, I was wondering if there is any CSS style to represent code block.
A very simple example would be stackoverflow code tag (shown below)
<script type="text/javascript">
alert('this is example of what i need to do ') ;
</script>
Since you are using wordpress, there are plugins to do that. Just by looking at http://wordpress.org/extend/plugins/tags/syntax-highlighting there seems to be quite a few to choose from.

Resources