Is there a way to get R syntax highlighting in confluence? I've tried General configuration > configure code macro > add new language, but I have no clue how to upload a custom brush syntax for R..has anyone already done this or is there a way I can get it for R ?
For adding a syntax-highlighting "brush" javascript file I found the following process to work nicely.
get yourself the latest Syntaxhighlighter from:
http://alexgorbatchev.com/SyntaxHighlighter/
e.g. 3.0.83 as of 2016-05
unpack it and create an index.html file that uses it like:
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Include required JS files -->
<script type="text/javascript" src="js/shCore.js"></script>
<!--
At least one brush, here we choose JS. You need to include a brush for every
language you want to highlight
-->
<script type="text/javascript" src="css/shBrushRule.js"></script>
<!-- Include *at least* the core style and default theme -->
<link href="css/shCore.css" rel="stylesheet" type="text/css" />
<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- You also need to add some content to highlight, but that is covered elsewhere. -->
<pre class="brush: R">
add your R code here
</pre>
<!-- Finally, to actually run the highlighter, you need to include this JS on your page -->
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
</body>
</html>
in the
<pre></pre>
you might want to add some R code. To create an R brush you might want to go from some of the brushes in the css folder:
shBrushAS3.js shBrushDelphi.js shBrushPerl.js shBrushSass.js
shBrushAppleScript.js shBrushDiff.js shBrushPhp.js shBrushScala.js shBrushBash.js shBrushErlang.js shBrushPlain.js shBrushSql.js
shBrushCSharp.js shBrushGroovy.js shBrushPowerShell.js shBrushTcl.js
shBrushColdFusion.js shBrushJScript.js shBrushPython.js shBrushVb.js
shBrushCpp.js shBrushJava.js shBrushRuby.js shBrushXml.js
shBrushCss.js shBrushJavaFX.js shBrushRule.js
it just needs a few lines of code and regular expressions to setup the keywords and comment, variable and other rules. When you have created (or searched for it on the internet e.g https://gist.github.com/yihui/1804862) your shBrushR.js file and are happy with it you can upload it to confluence via General configuration > configure code macro > add new language (and hopefully add the resulting js file to this answer to make this a fully complete solution - sorry I don't know R myself so I can't help much with this part)
See the below R brush (taken from the link above) as an example:
/**
* Author: Yihui Xie
* URL: http://yihui.name/en/2010/09/syntaxhighlighter-brush-for-the-r-language
* License: GPL-2 | GPL-3
*/
SyntaxHighlighter.brushes.R = function()
{
var keywords = 'if else repeat while function for in next break TRUE FALSE NULL Inf NaN NA NA_integer_ NA_real_ NA_complex_ NA_character_';
var constants = 'LETTERS letters month.abb month.name pi';
this.regexList = [
{ regex: SyntaxHighlighter.regexLib.singleLinePerlComments, css: 'comments' },
{ regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' },
{ regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' },
{ regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' },
{ regex: new RegExp(this.getKeywords(constants), 'gm'), css: 'constants' },
{ regex: /[\w._]+[ \t]*(?=\()/gm, css: 'functions' },
];
};
SyntaxHighlighter.brushes.R.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.R.aliases = ['r', 's', 'splus'];
Related
<template>
<div class="container">
<head>
<link rel="stylesheet" href="~assets/css/style-light.css" />
<link rel="stylesheet" href="~assets/css/login-light.css" />
</head>
</div>
</template>
Importing css like above results in this error
vue.runtime.esm.js:5717 GET http://localhost:3000/~assets/css/login-light.css net::ERR_ABORTED 404 (Not Found)
Is there really no other way loading css other than putting the whole css in the template?
The first thing you need to know is, you can't declare a html head inside any place, neither in yours tamplate, neither in yours components, neither in yours pages, neither in nowhere.
Keep in mind that you can't use a html tags for this, you will use a json schema.
take a look https://nuxtjs.org/guide/configuration for more detailed explanations.
Now about you doubt if you want to import the CSS as globally, the correct place is inside your nuxt.config.js, inside this file, you have a property called head, and inside the head we will configure all the imports.
So, inside nuxt.config.js find your head session, and then create new property called css, some thing like this:
head: {
css: [
'~/assets/style/app.styl',
'~/assets/style/main.css'
],
}
...
Another way, is import your css directly inside your component, for this you can do some thing like this:
<style scoped>
#import '~/assets/style/main.css';
</style>
OR
<style scoped src="#/assets/styles/mystyles.css">
</style>
In Nuxt, you will need a CSS loader instaled in your application too, so have sure you had intalled a "stylus" and "stylus-loader" in your app.
try to impot your css files in script like this :
<script>
import "#/assets/css/style-light.css";
import "#/assets/css/login-light.css";
///
</script>
EDIT: changed ~ to #
You could bring your files in using the head method like so :
head () {
return {
link: [
{ rel: 'stylesheet', href: '/style-light.css' },
{ rel: 'stylesheet', href: '/login-light.css' }
]
}
}
You should also move these css files into the static folder. See this discussion on the Vue forum https://forum.vuejs.org/t/nuxt-import-css-file-and-js-file/42498
I'm having trouble with AMP and CSS in Next.js. In my head component I have:
<Head>
<style amp-custom>{`
// CSS Here
`}</style>
</Head>
In the HTML source it shows up as <style amp-custom=""></style><style>(CSS Here)</style>
In the console I get this error: The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom (transformed)'.
How can I work with AMPHTML's rules on CSS and Next both? Every other method I've tried (such as importing from a file using #zeit/next-sass) causes the CSS to not be rendered at all. This is the only working version I've found.
Try this:
<Head>
<style
amp-custom=""
dangerouslySetInnerHTML={{
__html: `
amp-img {
border: 1px solid black;
}
`,
}}
></style>
</Head>
...It has to be: <style jsx>...</style>. Very dumb mistake that I've been looking for workarounds on all day. :/
As of Sept 2020, I've been having this issue too. I'm new at this, but with no help from the official tutorials. I did find a workaround.
First, I want to point out a couple of things from Next.js that they tell you.
non-AMP page styles are usually placed in _document.js from the next.js example.
</Head>
<style jsx global>{ reset }</style>
<style jsx global>{ globals }</style>
<body>
<Main />
<NextScript />
</body>
They mention in the tutorial to put <style amp-custom>. They don't say where, but it should be within the <Head></Head> of index.js (or whatever .js file for individual pages) OR _document.js for every page.
Ok, sounds good, BUT it's partially wrong!
I will explain what I found it does when turn on amp pages on in Next.JS.
So on an individual page, such as index.js, you need to this code at the top:
export const config = {
amp: true,
}
Then you have to put this in the return function:
const isAmp = useAmp()
Standard instructions from the tutorial. Now AMP is turned on, here's what happens:
Anything in <style amp-custom> is turned into a <style>
anything that is in <style jsx> is turned into a <style amp-custom> tag.
In addition to #2, it injects a unique random index that ruins any css code in that gets put into the generated <style amp-custom> tag.
<style amp-custom>.jsx-2373233908{/* your CSS code that you put in <style jsx> from before */}</style>
and that .jsx-########### throws a "/ error CSS syntax error in tag 'style amp-custom' - incomplete declaration." when you try to compile.
Is this opposite and odd behavior. YES. I don't get why it does it, but I'm a newb.
So my workaround goes like this:
Install your CSS framework package or put your CSS file into the styles folder (let's say located at : ./styles/styles.css)
I also add raw loader from your terminal window. Because I like to put my css in a file, not type it inlined with the code. Let's be realistic, you're going to separate CSS and you'll need to load that file in.
npm install raw-loader --save-dev
Load the CSS in your _document.js (here's my whole _document.js). I use "}" and "{" with fixCSS to escape the .jsx-########### and the injected code magically disappears.
import Document, { Html, Head, Main, NextScript } from 'next/document'
import styleCSS from '!!raw-loader!../styles/styles.css';
const fixCSS = `}${styleCSS}{`;
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html lang="en">
<Head>
</Head>
<style jsx>{`
${fixCSS}
` }</style>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
That's it. Now your imported CSS is shown on AMP pages. Remember this is for sept 2020 using these packages in my package.json:
"dependencies": {
"amp": "^0.3.1",
"next": "^9.5.3-canary.25",
"next-env": "^1.1.1",
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"cssnano": "^4.1.10",
"now": "^19.2.0",
"raw-loader": "^4.0.1"
},
Try:
<style jsx amp-custom>
`
... my css
`
</style>
I just tested it out and it worked okay. Not the best approach, NextJS should document the ways to add css in somewhere.
This worked:
const ampStyle = `h1{color:red;}`
<style jsx>{ampStyle}</style>
I'm preparing a starter for react from scratch, here is the code: https://github.com/antondc/react-starter
I managed to set up bundling for client and server, with css modules and less, and now I'm with server side rendering. I'm doing that with a js template:
// src/server/views/index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INDEX.EJS</title>
<link rel="stylesheet" type="text/css" href="assets/index.css">
</head>
<body>
<div id="app"></div>
<script src="/assets/bundle.js"></script>
</body>
</html>
As you see, the link to the css file is harcoded there. But in my Webpack configuration I have this file name hashed, because I want to prevent caching from browsers when I update the code on development.
I am wondering how can I link the css file there. Now in the template I have href="assets/index.css, but the css file is in /dist/assets/d47e.css.
It would be great if would be possible to do something like href="assets/*.css, but is not possible, so what is the common approach for a problem like this one?
Thanks!
It depends.
Step 1: Get the current asset name
To get the current name of the generated webpack css/js files, you can use the assets-webpack-plugin. This will (with default config) generate an assets.json file in your output folder with essentially this structure:
{
"bundle_name": {
"asset_kind": "/public/path/to/asset"
}
}
Step 2a: Your html is rendered from a template (pug/jade/what ever)
// in your render code
const assets = require('<webpack-output-folder>/assets.json');
// ...
res.render('template', {
scripts: [{src: `${WEBPACK_PUBLIC_PATH}/${assets.myEntryPointName.js}` }],
links: [{href: `${WEBPACK_PUBLIC_PATH}/${assets.myEntryPointName.css}` rel: 'stylesheet' }],
});
// in your template (example for pug)
// ...
each link in links
link(rel=link.rel href=link.href)
// ...
each script in scripts
script(src=script.src)
// ...
Step 2b: Your html is static
You need to update the html (using a script) with the information from the asset.json file. This script needs to be run after webpack. Something like
const assets = require('<webpack-output-folder>/assets.json');
const fs = require('fs');
const css = /assets\/[a-z0-9]*\.css/i;
const js = /assets\/[a-z0-9]*\.js/i;
fs.readFile('<yourhtml>.html', (err, data) => {
// ... (error handling)
const updatedCss = data.replace(css, assets.myEntryPointName.css);
const updatedJs = updatedCss.replace(js, assets.myEntryPointName.js);
fs.writeFile('<yourhtml>.html', updated, (err) => {
// ... (error handling)
});
});
You can use HTMLWebpackPlugin to generate an HTML file that will have your JS and CSS output inserted.
Trying to set up gulp and one of the steps is frustrating. I am following a tutorial and can't get it to work right.
https://css-tricks.com/gulp-for-beginners/
Basically, I want to create a build task that compiles sass, concats the css files, minimizes it, and output it to the public folder. Here is my code for my index.html. (Simplified).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--build:css css/styles.min.css -->
<link rel="stylesheet" href="scss/styles.scss">
<!-- endbuild -->
</head>
<body>
</body>
</html>
Now here is my Gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass'),
useref = require('gulp-useref'), // Use to concatenate files
gulpIf = require('gulp-if'),
cssnano = require('gulp-cssnano'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
imagecache = require('gulp-cache'),
del = require('del'),
runsequence = require('run-sequence');
/* ********************************* */
// PRODUCTION TASKS ONLY \\
/*Used to start with a clean slate on the public folder */
gulp.task('clean:public', function () {
return del.sync('public');
})
gulp.task('watch:prod', function () {
gulp.watch('src/scss/**/*.scss', ['sass']);
});
gulp.task('sass:prod', function () {
return gulp.src('src/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('public/css'))
});
gulp.task('useref:prod', function () {
return gulp.src('src/*.html')
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('public'));
});
gulp.task('images:prod', function () {
return gulp.src('src/images/**/*.+(png|jpg|gif|svg)')
.pipe(imagecache(imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.jpegtran({progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({plugins: [{removeViewBox: true}]})
])))
.pipe(gulp.dest('public/images'));
});
gulp.task('cssimages:prod', function () {
return gulp.src('src/css/cssimages/**/*.+(png|jpg|gif|svg)')
.pipe(imagecache(imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.jpegtran({progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({plugins: [{removeViewBox: true}]})
])))
.pipe(gulp.dest('public/css/cssimages'));
});
/* BRING EVERYTHING TOGETHER */
gulp.task('build:prod', function (callback){
runsequence
(
'clean:public',
['sass:prod','useref:prod','images:prod', 'cssimages:prod'],
callback
)
})
As per the tutorial, this should create a file in the public folder under css names styles.min.css
This file should also already be compiled down from sass. I did an example styles.scss and inside it I have.
$bgcolor : yellow;
body {
background: $bgcolor;
}
div {
width: 100px;
height: 20px;
}
When I run gulp build:prod , this is what it outputs in styles.min.css
$bgcolor:#ff0;body{background:$bgcolor}div{width:100px;height:20px}
The files minimizing fine but i can't get the sass part run right and compile when use the build task.
^^^ As you see, instead of sassing the file and then concatenating the file, it create 2 files. I'm trying to have gulp sass the file first, and then have useref move the file to the public folder and rename it to styles.min.css
It seems I'm missing something somewhere or not sourcing/destinating to the right folders?
If I run gulp sass:prod, it works fine. But can't seem to get my build task to run right I'm stumped.
From the article that you have mentioned,
Gulp-useref concatenates any number of CSS and JavaScript files into a
single file by looking for a comment that starts with "". Its syntax is:
<!-- build:<type> <path> --> ... HTML Markup, list of script / link tags. <!-- endbuild -->
path here refers to the target path of the generated file.
According to the document you have specified the following.
<!--build:css css/styles.min.css -->
<link rel="stylesheet" href="scss/styles.scss">
<!-- endbuild -->
So the useref will copy the styles from styles.scss and creates styles.min.css and pastes the scss styles. That is the reason you are getting scss styles in the minified styles.min.css
To achieve what you wanted you have to modify your sass:prod dest path like below.
gulp.task('sass:prod', function () {
return gulp.src('src/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('src/css'))
});
and in the html, you have to reference the css file.
<!--build:css css/styles.min.css -->
<link rel="stylesheet" href="css/styles.css">
<!-- endbuild -->
And also as specified by #Mark, it is better to modify the run-sequence to make sure that the sass:prod task completes before the useref:prod task.
gulp.task('build:prod', function (callback){
runsequence
(
'clean:public','sass:prod',
['useref:prod','images:prod', 'cssimages:prod'],
callback
)
})
From the run-sequence documentatin :
You can still run some of the tasks in parallel, by providing an array of task names for one or more of the arguments.
So, in your tasks array :
['sass:prod','useref:prod','images:prod', 'cssimages:prod'],
these tasks run in parallel. There is no guarantee that the 'sass:prod' task will complete before the 'useref:prod' task. If you want that to happen change to:
gulp.task('build:prod', function (callback){
runsequence
(
'clean:public',
'sass:prod',
['useref:prod','images:prod', 'cssimages:prod'],
callback
)
})
I am getting the error: "Uncaught referenceError: App is not defined" in my JS console when loading this Enyo app on my localhost. I am brand new to Enyo so I am still trying to learn the concepts of kinds and components.
app.js (in source folder):
enyo.kind({
name: "App",
kind: "FittableRows",
classes: "enyo-fit enyo-unselectable",
components: [
{
kind: "onyx.Toolbar",
layoutKind:"FittableColumnsLayout",
components: [
{
kind:onyx.Button,
style:"width:80px;background:green;",
ontap:"handleBtnBack",
content:"Back"
},
{
content:"Header",
style:"text-align:center;",
fit:true
},
{
kind:onyx.Button,
style:"width:80px;background:red;",
ontap:"handleBtnNext",
content:"Next"
}
]
},
{
kind: "Scroller",
horizontal:"hidden",
touch:true,
fit:true,
thumb:true,
components:[
{
tag:"h1",
//This is how we insert css class.
classes:"padding15px",
content:"This is content area...Hello World!!!"
}
]
},
{
kind: "onyx.Toolbar",
// The footer
layoutKind:"FittableColumnsLayout",
components:[
{
kind:"onyx.Button",
content:"Go Next Page",
ontap:"handleBtnNextPage",
fit:true
}
]
}
],
create: function(){
this.inherited(arguments);
console.log("App is created in memory");
},
rendered : function(){
this.inherited(arguments);
console.log("App is created in rendered into DOM");
},
handleBtnNextPage : function(inSender,inEvent){
new Page2().renderInto(document.body);
},
handleBtnNext: function(inSender,inEvent){
new Page2().renderInto(document.body);
},
handleBtnBack: function(inSender,inEvent){
//For each enyo event handler comes with inSender, the control that sends the event and the inEvent the actual event itself.
alert("Back Button");
}
});
package.js (in source folder):
enyo.depends(
// Layout library
"$lib/layout",
// Onyx UI library
"$lib/onyx", // To theme Onyx using Theme.less, change this line to $lib/onyx/source,
//"Theme.less", // uncomment this line, and follow the steps described in Theme.less
// CSS/LESS style files
"../assets/css/app.css",
// Include our default entry point
"App.js",
"Page2.js"
);
index.html (in root folder):
<!--My Copy-->
<!DOCTYPE html>
<html>
<head>
<title>IsGoodStuff.com Tutorial #2</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" href="assets/favicon.ico"/>
<script src="enyo/enyo.js" type="text/javascript"></script>
<!-- -->
<script src="package.js" type="text/javascript"> </script>
</head>
<body>
<script type="text/javascript">
new App().renderInto(document.body);
</script>
</body>
</html>
If your index.html is in your root folder, but the main package.js is in the source folder, it's probably your script tag that loads package.js. Try:
<script src="source/package.js" type="text/javascript"> </script>
You haven't supplied Page2 but it appears the code would work as-is.
Here's a fiddle showing the working page: http://jsfiddle.net/kgxvg7Lw/1/
Some thoughts:
1) Are you using a case-sensitive file system? You show app.js but your package.js has App.js (capitalized).
2) Are you certain there are no parse errors in the console?
Now, that said... You probably don't want to reload a new app for every 'page' switch. Usually, you would use something like Panels to allow the app to control the content that appears on the screen and just navigate among the panels as needed.