Seth Miller dot org

I installed the SyntaxHighlighter Evolved plugin to better display code in my blog posts. I will be going through old posts and updating them so that any code that is not pulled directly from GitHub uses it.

I’m not a web developer so if I sound like a novice, it’s because I am. I made these edits by looking at examples and copying the work of others. I welcome feedback and corrections.

I generally use the Bash/Shell brush but found it lacking a few features that are pretty basic when looking at shell code so I’ve added them to my templates.

I usually include the shell prompt in my code boxes to differentiate between commands but find it painful when I am trying to select from someone’s code snippet and have to select “around” the prompts so I added a css context that disallows a select and made all of my prompts use that context. Here’s an example. Try to select the code in this box and paste it somewhere else.

[root@shell prompt ~]# The prompt is not selectable but this text is.

There are two parts to this. One is the css piece that I just added into the shThemeDefault.css.

.syntaxhighlighter .bashprompt {
  color: brown !important;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

The second part is the addition of the third line to the shBrushBash.js javascript brush file.

		this.regexList = [
			{ regex: /^#!.*$/gm,											css: 'preprocessor bold' },
			{ regex: /^\[[^\]]+]# ?/g,										css: 'bashprompt' },
			{ regex: /\w+==?/g,												css: 'variable' },
			{ regex: /\/[\w-\/]+/gm,										css: 'plain' },
	//		{ regex: SyntaxHighlighter.regexLib.singleLinePerlComments,		css: 'comments' },		// one line comments
			{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,			css: 'string' },		// double quoted strings
			{ regex: SyntaxHighlighter.regexLib.singleQuotedString,			css: 'string' },		// single quoted strings
			{ regex: new RegExp(this.getKeywords(keywords), 'gm'),			css: 'keyword' },		// keywords
			{ regex: new RegExp(this.getKeywords(commands), 'gm'),			css: 'functions' }		// commands
			];
	}

It is a regular expression that says; look for a left bracket at the beginning of the line followed by one of more characters that are not right brackets, followed by a right bracket and a pound sign and zero or one space and assign the whole thing to the bashprompt css context.

There are two other things I have changed so far. I commented out line six which is the one line comment because it was messing with my root prompt and I added line four for highlighting variable assignments.

		this.regexList = [
			{ regex: /^#!.*$/gm,											css: 'preprocessor bold' },
			{ regex: /^\[[^\]]+]# ?/g,										css: 'bashprompt' },
			{ regex: /\w+==?/g,												css: 'variable' },
			{ regex: /\/[\w-\/]+/gm,										css: 'plain' },
	//		{ regex: SyntaxHighlighter.regexLib.singleLinePerlComments,		css: 'comments' },		// one line comments
			{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,			css: 'string' },		// double quoted strings
			{ regex: SyntaxHighlighter.regexLib.singleQuotedString,			css: 'string' },		// single quoted strings
			{ regex: new RegExp(this.getKeywords(keywords), 'gm'),			css: 'keyword' },		// keywords
			{ regex: new RegExp(this.getKeywords(commands), 'gm'),			css: 'functions' }		// commands
			];
	}