SyntaxHighlighter skipping first line

293 Posts

Murray Reply #1, 11 years, 7 months ago

I'm using Bob's excellent extra SyntaxHighlighter for some upcoming tutorials, but I seem to have a problem with how it displays. I have the line numbers showing on the left but my code doesn't start until line 2. Line 1 is always blank no matter the spacing I've mucked around with.
I'm also using <fixedpre> within the <pre> tags.

It's not a big problem but it would be helpful to be able to refer to the correct line.
Has anyone experienced this problem before?

This question has been answered by multiple community members. See the first response.

I'm lead developer at Digital Penguin Creative Studio in Hong Kong. https://www.digitalpenguin.hk
Check out the MODX tutorial series on my blog at https://www.hkwebdeveloper.com

discuss.answer

24,544 Posts

BobRay Reply #2, 11 years, 7 months ago

I've seen that on other sites, but I don't know what causes it.

Are you using the SH plugin or the snippet?

Can you paste an example?

Here's one of mine:

<pre class="brush: php; toolbar: false;"><fixedpre>
$user->joinGroup('Group1', 'Editor');
$user->joinGroup('Group1', 23);
$user->joinGroup(12, 'Editor');
$user->joinGroup(12, 23);
</fixedpre></pre>

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

293 Posts

Murray Reply #3, 11 years, 7 months ago

Hi Bob, I'm using the snippet.

I've attached a screenshot to show how it's displaying and here's the code:

<pre class="brush:js;toolbar:false;">
	<fixedpre>
	Example.panel.Home = function(config) {
		config = config || {};
		Ext.apply(config,{
			border: false
			,baseCls: 'modx-formpanel'
			,cls: 'container'
			,items: [{
				html: '<h2>Example Panel</h2>'					
				,border: false
				,cls: 'modx-page-header'
			},{
				xtype: 'modx-tabs'
				,defaults: { border: false ,autoHeight: true }
				,border: true
				,items: [{
					title: _('example')
					,defaults: { autoHeight: true }
					,items: [{
						html: '<p>'+_('example.description')+'</p>'
						,border: false
						,style: 'margin:20px 0 0 20px;'
					},{
						xtype: 'example-grid-example'
						,cls: 'main-wrapper'
						,preventRender: true
						,flex: 1
					 }]
				}]
			}]
		});
		Example.panel.Home.superclass.constructor.call(this,config);
	};
	Ext.extend(Example.panel.Home,MODx.Panel);
	Ext.reg('example-panel-home',Example.panel.Home);
</fixedpre>
</pre>

I've also found if I move the <fixedpre> tag to the same line as the <pre> tag it can stop the bottom line from being displayed too. Weird!

I'm lead developer at Digital Penguin Creative Studio in Hong Kong. https://www.digitalpenguin.hk
Check out the MODX tutorial series on my blog at https://www.hkwebdeveloper.com

293 Posts

Murray Reply #4, 11 years, 7 months ago

Here's an attached image of when I've moved the tag slightly.

<pre class="brush:js;toolbar:false;"><fixedpre>
	Example.panel.Home = function(config) {
		config = config || {};
		Ext.apply(config,{
			border: false
			,baseCls: 'modx-formpanel'
			,cls: 'container'
			,items: [{
				html: '<h2>Example Panel</h2>'					
				,border: false
				,cls: 'modx-page-header'
			},{
				xtype: 'modx-tabs'
				,defaults: { border: false ,autoHeight: true }
				,border: true
				,items: [{
					title: _('example')
					,defaults: { autoHeight: true }
					,items: [{
						html: '<p>'+_('example.description')+'</p>'
						,border: false
						,style: 'margin:20px 0 0 20px;'
					},{
						xtype: 'example-grid-example'
						,cls: 'main-wrapper'
						,preventRender: true
						,flex: 1
					 }]
				}]
			}]
		});
		Example.panel.Home.superclass.constructor.call(this,config);
	};
	Ext.extend(Example.panel.Home,MODx.Panel);
	Ext.reg('example-panel-home',Example.panel.Home);
</fixedpre>
</pre>

I tried removing all the code formatting as a test too but still the same thing.

I'm lead developer at Digital Penguin Creative Studio in Hong Kong. https://www.digitalpenguin.hk
Check out the MODX tutorial series on my blog at https://www.hkwebdeveloper.com

discuss.answer

293 Posts

Murray Reply #5, 11 years, 7 months ago

On further testing it appears to be a conflict with Twitter Bootstrap. Removing the link to bootstrap.min.css fixed the problem.
So not a SyntaxHighlighter problem. I'll try to track down exactly which CSS property is causing it.
Cheers for the help anyway, Bob! laugh

Final answer: It's the following that's causing the issue.

vertical-align: baseline !important;

Removing this from bootstrap fixed the problem.
I think it's because SyntaxHighlighter wraps the code portion in a <div class="container"> which bootstrap also uses for layout. [ed. note: muzzstick last edited this post 11 years, 7 months ago.]

I'm lead developer at Digital Penguin Creative Studio in Hong Kong. https://www.digitalpenguin.hk
Check out the MODX tutorial series on my blog at https://www.hkwebdeveloper.com

24,544 Posts

BobRay Reply #6, 11 years, 7 months ago

I'll have to look into renaming that. I don't think Twitter Bootstrap is going to change it. wink

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

293 Posts

Murray Reply #7, 11 years, 7 months ago

That would be great! laugh

I'm lead developer at Digital Penguin Creative Studio in Hong Kong. https://www.digitalpenguin.hk
Check out the MODX tutorial series on my blog at https://www.hkwebdeveloper.com

24,544 Posts

BobRay Reply #8, 11 years, 7 months ago

I took a look. It's more complicated than I hoped, so probably no time soon.

If you can work it out, call it sh-container or sh_container and feel free to make a pull request for the dev branch: https://github.com/BobRay/syntaxhighlighter/tree/dev. wink

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

293 Posts

Murray Reply #9, 11 years, 7 months ago

I think I've gotten it working. Div has been renamed to sh_container but I needed to grab the source code from the original.
Pull request has been made. I haven't touched the _build directory though. [ed. note: muzzstick last edited this post 11 years, 7 months ago.]

I'm lead developer at Digital Penguin Creative Studio in Hong Kong. https://www.digitalpenguin.hk
Check out the MODX tutorial series on my blog at https://www.hkwebdeveloper.com

Answered SyntaxHighlighter skipping first line