We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Locked Topic
  • Pages:
  • 1
[ ! ] Code Synthax
Topic Started: Jan 14 2015, 12:19 AM (1,174 Views)
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Test board
Zeta


Can anybody create or direct me to a code that will correctly add Synthax to the [code] BBcode?
Like how you can do it with [html] but I want this for JQuery, Javascript, CSS, Lua, C+, C++, Python, Java, MySQL, and PHP
If it helps any here are sources for code Synthax.
http://prismjs.com/
https://highlightjs.org/
https://code.google.com/p/google-code-prettify/
Edited by Kankuro, Jan 14 2015, 11:18 PM.
Offline Profile Goto Top
 
Viral
Member Avatar
Viral
[ *  *  *  *  *  * ]
For someone who has time to do this, prismjs is a good option (I've used it before). One option would be to use xanikseo's bbcode to convert `[code=js]..[/code]` to the `<code class="language-js">..</code>` or whatever it should be.
Edited by Viral, Jan 17 2015, 03:29 PM.
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Viral
Jan 17 2015, 03:28 PM
For someone who has time to do this, prismjs is a good option (I've used it before). One option would be to use xanikseo's bbcode to convert `[code=js]..[/code]` to the `<code class="language-js">..</code>` or whatever it should be.
The main languages I want are the web design languages (MySQL, PHP, CSS, JavaScript, JQuery, etc) and the most popular programming ones like C+, Python, Java, and C#
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Well, I got the code to work for the most part, only there's a problem: http://i.imgur.com/I67HO7I.png

The span elements make everything display inline and there's not really a CSS value for 'display' that produces a normal effect for the text that I'm aware of.
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Cory
Jan 28 2015, 03:17 PM
Well, I got the code to work for the most part, only there's a problem: http://i.imgur.com/I67HO7I.png

The span elements make everything display inline and there's not really a CSS value for 'display' that produces a normal effect for the text that I'm aware of.
Looks good, unfortunately I can't really help, you're smarter than me lol. Maybe Viral can suggest something.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Hopefully someone will figure out the issue, otherwise it's unfortunate such a cool code can't be used due to a silly minor CSS issue it seemed the provider of the code would have fixed. You could always try contacting the webmaster of that webpage if no one pulls through. I'm clueless myself.
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
I can try to ask a few knowledgeable coders I know. Only issue is that they wouldn't know anything about Zetaboards. However they will know CSS, JS, PHP, MySQL, etc.

If this can be fixed without knowledge of ZB then I'll ask.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
They don't have to know anything about ZetaBoards to fix this issue. It's a CSS issue.
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Cory
Feb 4 2015, 02:53 PM
They don't have to know anything about ZetaBoards to fix this issue. It's a CSS issue.
Would you mind posting the full coding so I can provide it to them?
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
<head>:
Code:
 
<link rel="stylesheet" type="text/css" href="http://z3.ifrm.com/63/1/0/p509771/prism.css" />
<body>:
Code:
 
<script type="text/javascript">
function addLang(nClass, nName) {
$('blockquote dt:contains(' + nClass + ')').parents('blockquote').find('code').addClass('language-' + nClass);
$('blockquote dt:contains(' + nClass + ')').text('Code: ' + nName);
}

addLang('css', 'CSS');
addLang('javascript', 'JavaScript');
addLang('php', 'PHP');
addLang('sql', 'SQL');
addLang('c++', 'C++');
addLang('c#', 'C#');
addLang('python', 'Python');
addLang('java', 'Java');
</script>
<script type="text/javascript" src="http://z3.ifrm.com/63/1/0/p509772/prism.js"></script>
Offline Profile Goto Top
 
RedBldSandman
Member Avatar
Asante sana Squash banana
[ *  *  *  * ]
JavaScripts:
Code:
 
<link rel="stylesheet" type="text/css" href="http://z3.ifrm.com/63/1/0/p509771/prism.css" />
<script type="text/javascript" src="http://z3.ifrm.com/63/1/0/p509772/prism.js"></script>
<script type="text/javascript">
Prism.hooks.add('wrap', function(env) {
if (env.type === 'string' && env.content === '\'{{**BR**}}\'') {
env.classes = ['replace_br'];
}
});
Prism.hooks.add('after-highlight', function(env) {
$('span.replace_br', env.element).replaceWith('<br/>');
});
</script>
Below the Board:
Code:
 
<script type="text/javascript">
function addLang(nClass, nName) {
$('blockquote dt:contains(' + nClass + ')').text('Code: ' + nName).parents('blockquote').find('code').addClass('language-' + nClass).html(function(j, h) { return h.replace(/<br ?\/?>/gi,'\'{{**BR**}}\''); });
}

addLang('css', 'CSS');
addLang('javascript', 'JavaScript');
addLang('php', 'PHP');
addLang('sql', 'SQL');
addLang('c++', 'C++');
addLang('c#', 'C#');
addLang('python', 'Python');
addLang('java', 'Java');
</script>
This is a really dirty way of sorting out the problem but I don't have time to come up with a more elegant solution so have just used Cory's code and added bits to fix the problem. The problem isn't a CSS problem. It is caused by Prism stripping html from the code element before doing the syntax highlighting thereby removing all the linebreak elements (<br/>). This solution converts the linebreak elements into text and then converts them back at the end of the syntax highlighting. This approach could cause problems in some codes but this should be pretty rare. If it causes problems regularly then a new solution will need to be devised.
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Your "solution" seems to have made it worse...
http://prntscr.com/626jfp

EDIT: Also the only ones that got colored were CSS and PHP
Edited by Kankuro, Feb 7 2015, 11:51 AM.
Offline Profile Goto Top
 
RedBldSandman
Member Avatar
Asante sana Squash banana
[ *  *  *  * ]
Just checked on other languages (I only tested it on javascript which worked perfectly) and it won't work as it's parsed differently. I've identified the cause of the issue but don't have time to find another "solution" for you so you'll have to hope someone else comes to your aid.
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
RedBldSandman
Feb 7 2015, 02:41 PM
Just checked on other languages (I only tested it on javascript which worked perfectly) and it won't work as it's parsed differently. I've identified the cause of the issue but don't have time to find another "solution" for you so you'll have to hope someone else comes to your aid.
I've been talking to a very educated coder about this and it's a slow process but I've been relaying the information I receive to Cory. So hopefully he can sort it out.

Thanks for trying though :D
Edited by Kankuro, Feb 7 2015, 11:30 PM.
Offline Profile Goto Top
 
RedBldSandman
Member Avatar
Asante sana Squash banana
[ *  *  *  * ]
I had a couple of minutes and came up with a more elegant solution which should work for all cases.
Javascripts
Code:
 
<link rel="stylesheet" type="text/css" href="http://z3.ifrm.com/63/1/0/p509771/prism.css" />
<script type="text/javascript" src="http://z3.ifrm.com/63/1/0/p509772/prism.js"></script>
Below The Board
Code:
 
<script type="text/javascript">
function addLang(nClass, nName) {
$('blockquote dt:contains(' + nClass + ')').text('Code: ' + nName).parents('blockquote').find('code').addClass('language-' + nClass).html(function(j, h) { return h.replace(/<br\s*\/?>/gi, '\n'); });
}

addLang('css', 'CSS');
addLang('javascript', 'JavaScript');
addLang('php', 'PHP');
addLang('sql', 'SQL');
addLang('c++', 'C++');
addLang('c#', 'C#');
addLang('python', 'Python');
addLang('java', 'Java');
</script>
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
ZetaBoards - Free Forum Hosting
Free Forums with no limits on posts or members.
Go to Next Page
« Previous Topic · Closed Requests · Next Topic »
Locked Topic
  • Pages:
  • 1