diff --git a/forum/qa-content/css/shCore.css b/forum/qa-content/css/shCore.css
index 2e182303..01c77688 100644
--- a/forum/qa-content/css/shCore.css
+++ b/forum/qa-content/css/shCore.css
@@ -54,7 +54,7 @@
 
 .syntaxhighlighter {
   width: 100% !important;
-  margin: 1em 0 1em 0 !important;
+  margin: /*1em*/ 0.20em 0 1em 0 !important;
   position: relative !important;
   overflow: auto !important;
   font-size: 1em !important;
diff --git a/forum/qa-content/qa-page.js b/forum/qa-content/qa-page.js
index bfad28bb..a045bc3e 100644
--- a/forum/qa-content/qa-page.js
+++ b/forum/qa-content/qa-page.js
@@ -186,14 +186,166 @@ function qa_ajax_error()
  */
 ;(function(document)
 {
+	////
+	// clear console (for devloping purposes - clears errors from console)
+	console.clear();
+	////
+	
 	'use strict';
 	
+	// boolean flag, to check if browser supports 'select()' and 'copy' command
+	var prepareClipboardCopying;
+	
+	if (window.getSelection && document.queryCommandSupported('copy'))
+		prepareClipboardCopying = true;
+	else 
+		prepareClipboardCopying = false;
+	
+	
+	/*
+	 * Feature: preview HTML/CSS/JavaScript code from chosen post in codepen.io / jsfiddle.net
+	 */
+	 function previewFrontEnd()
+	 {
+		 var posts = Array.from(document.querySelectorAll('.entry-content'));
+		var postsWithBlocks = [];
+		posts.forEach(function(post)
+		{
+		   var query = post.querySelectorAll('.syntaxhighlighter-parent');
+		   if (query.length)
+		   {
+			  //// postsWithBlocks.push(Array.from(query));
+
+			 var blocksInPost = {};
+			 var data = {};
+			 var htmlCode = '';
+			 var cssCode = '';
+			 var jsCode = '';
+			 var parent = Array.from(query)[0].parentNode.parentNode;
+
+			 Array.from(query).forEach(function(block, index)
+			 {
+				var code = '';
+				Array.from(block.querySelectorAll('.code .line')).forEach(function(line)
+				{
+					code += line.textContent + '\r\n';
+				});
+				blocksInPost[block.firstElementChild.nextSibling.classList[1]] = code /*block.firstElementChild.nextSibling*/;
+			 });
+			 ////postsWithBlocks.push(blocksInPost);
+			 Object.keys(blocksInPost).forEach(function(language)
+			 {       
+				switch (language)
+				{
+				   case 'css' : cssCode += blocksInPost.css;
+								data.css = cssCode;
+								break;
+				   case 'xml' : htmlCode += blocksInPost.xml;
+								data.html = htmlCode;
+								break;
+				   case 'jscript' : jsCode += blocksInPost.jscript;
+								data.js = jsCode;
+								break;
+				}
+			 });
+
+			var JSONstring = 
+		  JSON.stringify(data)
+			// Quotes will screw up the JSON
+			.replace(/"/g, "&​quot;") // careful copy and pasting, I had to use a zero-width space here to get markdown to post this.
+			.replace(/'/g, "'");
+
+			  var form = document.createElement('form');
+			  form.action = 'http://codepen.io/pen/define';
+			  form.method = 'POST';
+			  form.target= '_blank';
+			  form.style.backgroundColor = 'red';
+
+			  var input1 = document.createElement('input');
+			  input1.type = 'hidden';
+			  input1.name = 'data';
+			  input1.value = JSONstring;
+
+			  var input2 = document.createElement('input');
+			  input2.type = 'image';
+			  input2.src = 'http://s.cdpn.io/3/cp-arrow-right.svg';
+			  input2.width = 40;
+			  input2.height = 40;
+			  input2.value = 'Create new CODEPEN';
+
+			  form.appendChild(input1);
+			  form.appendChild(input2);
+
+		  ////var parent = document.querySelector('.qa-q-view-content');
+			  var before = parent.firstElementChild;
+
+			  parent.appendChild(form);
+
+		   }
+		});
+	 }
+	
+	/*
+	 *	Feature: copy code from code-block to clipboard on button click - then user can paste it wherever he wants into
+	 */
+	function copyToClipboard(ev)
+	{
+		// prevent page refresh (or something weird) as default button action
+		ev.preventDefault();
+		
+		var code = [];
+		var t = ev.target;
+		var parent = t.parentNode.parentNode;
+		
+		// get block of code content - practically all lines of code inside
+		Array.from(parent.querySelector('.code .container').children).forEach(function(lineOfCode)
+		{
+			code.push(lineOfCode.textContent);
+		});
+		
+		/*
+		 *	In order to be able to copy the code inside block into the clipboard - so user can easily paste it wherever he wants - within single button click
+		 * a code must be first selected (or highlighted in human meaning), so JavaScript can copy it.
+		 * However selecting is only possible on HTML elements that are 'inputs', such as <textarea>.
+		 * That's why below code creates <textarea> and insert there code content from block, copy it to clipboard and removes it (so user can't really see temporary <textarea> element blink) after whole process.
+		 */
+		var textArea = document.createElement("textarea");
+		textArea.classList.add('content-copy');
+		
+		code.forEach(function(singleLineOfCode)
+		{
+			textArea.value += singleLineOfCode + '\r\n';
+		});
+		
+		document.body.appendChild(textArea);
+		
+		// if anything on the page is selected (a.k.a highlighted) - clear the selection
+		if (window.getSelection().rangeCount)
+			window.getSelection().removeAllRanges();
+		
+		/*
+		 *	Below code will select given DOM elements
+		 * Modified script from source: http://stackoverflow.com/a/1173319/4983840
+		 */
+		// Create Range Object, so that text content can be selected (a.k.a highlighted)
+		var range = document.createRange();
+		range.selectNode( textArea );
+		window.getSelection().addRange(range);
+		
+		// copy content that is select inside Document - so that is only textarea
+		document.execCommand('copy');
+		
+		// remove <textarea> from DOM
+		document.body.removeChild(textArea);
+	}
+	
+	
 	/*
 	 * Feature: Collapsable blocks of code
 	 * Author: ChrissP92 - https://github.com/ChrissP92
 	 * Date: 05.07.2016r.
 	 */	
-	function handleCodeCollapsing(insidePreview)
+	function handleCodeCollapsing(insidePreview, addCopyBtn)
 	{		
 		/*
 		 *	!!!! IMPORTANT VARIABLE !!!!
@@ -206,73 +358,117 @@ function qa_ajax_error()
 		
 		// languages got from Forum site DOM
 		var languages = {
-			'brush:as3;' : 'actionscript',
-			'brush:applescript;' : 'applescript',
-			'brush:bash;' : 'bash-shell',
-			'brush:cf;' : 'coldfusion',
-			'brush:csharp;' : 'C#',
-			'brush:cpp;' : 'C++',
-			'brush:css;' : 'CSS',
-			'brush:delphi;' : 'delphi',
-			'brush:diff;' : 'diff',
-			'brush:erl;' : 'erlang',
-			'brush:groovy;' : 'groovy',
-			'brush:hx;' : 'haxe',
-			'brush:jscript;' : 'JavaScript',
-			'brush:java;' : 'Java',
-			'brush:javafx;' : 'Java-FX',
-			'brush:perl;' : 'perl',
-			'brush:php;' : 'PHP',
-			'brush:plain;' : 'plain-text',
-			'brush:ps;' : 'powershell',
-			'brush:python;' : 'Python',
-			'brush:ruby;' : 'Ruby',
-			'brush:scss;' : 'SASS',
-			'brush:scala;' : 'scala',
-			'brush:sql;' : 'SQL',
-			'brush:tap;' : 'tap',
-			'brush:ts;' : 'TypeScript',
-			'brush:vb;' : 'VB',
-			'brush:xml;' : 'XML-xHTML'
-		}
+			'as3' : 'actionscript',
+			'applescript' : 'applescript',
+			'bash' : 'bash-shell',
+			'cf' : 'coldfusion',
+			'csharp' : 'C#',
+			'cpp' : 'C++',
+			'css' : 'CSS',
+			'delphi' : 'delphi',
+			'diff' : 'diff',
+			'erl' : 'erlang',
+			'groovy' : 'groovy',
+			'hx' : 'haxe',
+			'jscript' : 'JavaScript',
+			'java' : 'Java',
+			'javafx' : 'Java-FX',
+			'perl' : 'perl',
+			'php' : 'PHP',
+			'plain' : 'plain-text',
+			'ps' : 'powershell',
+			'python' : 'Python',
+			'ruby' : 'Ruby',
+			'scss' : 'SASS',
+			'scala' : 'scala',
+			'sql' : 'SQL',
+			'tap' : 'tap',
+			'ts' : 'TypeScript',
+			'vb' : 'VB',
+			'xml' : 'XML-xHTML'
+		};
 										
-		var blocks = insidePreview ? Array.from(document.querySelectorAll('.post-preview-parent pre[class*="brush:"]')) : Array.from(document.querySelectorAll('pre[class*="brush:"]'));
+		var blocks = insidePreview ? Array.from(document.querySelectorAll('.post-preview-parent .syntaxhighlighter' /*pre[class*="brush:"]'*/)) : Array.from(document.querySelectorAll(/*'pre[class*="brush:"]'*/ '.syntaxhighlighter'));
+		
+		console.log('Blocks: ', blocks);
 		
 		// get all <pre> tags which are wrappers for (CKEditor) code and loop them
 		blocks.forEach(function(block)
-		{						
+		{									
 			// set each block attribute 'data-lang' to let CSS add :after pseudo elements with language name written inside block
-			block.setAttribute('data-lang', languages[block.classList[0]]);
+			////block.setAttribute('data-lang', languages[block.classList[1]]);
 			
 			// when code-block has new lines and their number is greater than maximum number of lines before being collapsed
-			if (block.innerHTML.indexOf('\n') > -1 && block.innerHTML.match(/\n/g).length + 1 >= numberOfLines)
+			////if (block.querySelectorAll('.line').length >= numberOfLines)
+			////if (block.innerHTML.indexOf('\n') > -1 && block.innerHTML.match(/\n/g).length + 1 >= numberOfLines)
 			{
-				// add CSS class to do some styling
-				block.classList.add('collapsed');
-				// add attribute to let CSS :before pseudo element set it's content to appropriate state of code-block
-				block.setAttribute('data-state', '-- Rozwiń --');
-
-				// when user clicks on code-block
-				block.addEventListener('click', function(ev)
-				{					
-					/*
-					 * when block-code is collapsed or not - change <pre> attribute and add/remove CSS class
-					 * to notify user the state of code-block
-					 */
-					if (block.classList.contains('collapsed'))
-					{
-						block.classList.remove('collapsed');
-						block.setAttribute('data-state', '-- Zwiń --');
-					}
-					else
-					{
-						block.classList.add('collapsed');
-						block.setAttribute('data-state', '-- Rozwiń --');
-					}
-				});
+				var additionalDiv = document.createElement('div');
+				var blockButton = document.createElement('button');
+				var languageInfo = document.createElement('div');
+				var copyCodeBtn = document.createElement('button');
+				
+				copyCodeBtn.textContent = 'Kopiuj';
+				copyCodeBtn.classList.add('content-copy-btn');
+				copyCodeBtn.addEventListener('click', copyToClipboard);
+								
+				additionalDiv.classList.add('syntaxhighlighter-additional');
+				
+				languageInfo.classList.add('syntaxhighlighter-language');
+								
+				if (block.querySelectorAll('.line').length >= numberOfLines)
+				{
+					blockButton.classList.add('syntaxhighlighter-button');
+					blockButton.textContent = '-- Rozwiń --';
+					
+					// add CSS class to do some styling
+					block.classList.add('collapsed-block');
+					// add attribute to let CSS :before pseudo element set it's content to appropriate state of code-block
+					////block.setAttribute('data-state', '-- Rozwiń --');
+					
+					// when user clicks on code-block
+					blockButton.addEventListener('click', function(ev)
+					{					
+						// prevent... dummy (refresh page) default action of button
+						ev.preventDefault();
+						
+						/*
+						* when block-code is collapsed or not - change <pre> attribute and add/remove CSS class
+						* to notify user the state of code-block
+						*/
+						if (block.classList.contains('collapsed-block'))
+						{
+							block.classList.remove('collapsed-block');
+							////block.setAttribute('data-state', '-- Zwiń --');
+							blockButton.textContent = '-- Zwiń --';
+						}
+						else
+						{
+							block.classList.add('collapsed-block');
+							////block.setAttribute('data-state', '-- Rozwiń --');
+							blockButton.textContent = '-- Rozwiń --';
+						}
+					});
+					
+					additionalDiv.appendChild(blockButton);
+				}
+				
+				////console.log('Block classList: ', block.classList);
+				
+				languageInfo.textContent = languages[block.classList[1]];
+				
+				additionalDiv.appendChild(languageInfo);
+				
+				if (addCopyBtn)
+					additionalDiv.appendChild(copyCodeBtn);
+				else
+					additionalDiv.classList.add('content-copy-disabled');
+				
+				block.parentNode.classList.add('syntaxhighlighter-parent');
+				////block.parentNode.insertBefore(blockButton, block);
+				block.parentNode.insertBefore(additionalDiv, block);
 			}
 		});	
-	}
+	};
 	
 	/*
 	 * Feature: Post content preview as Modal
@@ -293,10 +489,19 @@ function qa_ajax_error()
 		showModalBtn.innerHTML = 'Podgląd posta';
 		showModalBtn.classList.add('qa-form-tall-button', 'get-content-preview');
 		
+		console.log('preview');
+		
 		if (placeForBtn)		
+		{
 			placeForBtn.appendChild(showModalBtn);		
+		}
+		
 		else
-			document.querySelector('.qa-form-tall-buttons [value="Zadaj pytanie"]').parentNode.appendChild(showModalBtn);
+		{
+			var appendReference = document.querySelector('.qa-form-tall-buttons [value="Zadaj pytanie"]') || document.querySelector('.qa-form-tall-buttons [value="Zapisz"]') || document.querySelector('.qa-form-tall-buttons [value="Odpowiedz"]');
+			
+			appendReference.parentNode.appendChild(showModalBtn);
+		}
 		
 		function modalEventHandler(modalWrapper, closeBtn)
 		{
@@ -353,17 +558,20 @@ function qa_ajax_error()
 				modal.appendChild(modalContent);
 				modalParent.appendChild(modal);
 				
+				// use forum built-in plugin to make Modal blocks of code highlighted
+				SyntaxHighlighter.highlight();
+				
 				/*
 				 * prepare blocks of code inside Preview to be collapsed/expanded
 				 * "true" parameter lets to display collapsing blocks inside Preview Modal
 				 */
-				handleCodeCollapsing(true);
+				handleCodeCollapsing(true, prepareClipboardCopying);
 			}
 		});
-	}
+	};
 	
 	// when Forum (sub)page DOM is ready
-	window.addEventListener('DOMContentLoaded', function()
+	window.addEventListener(/*'DOMContentLoaded'*/ 'load', function()
 	{	
 		// find number in URL - so it's sure that topic is being viewed/opened
 		var url = location.pathname.split('/').findIndex(function(elem)
@@ -380,7 +588,8 @@ function qa_ajax_error()
 		{
 			// CKEDITOR's API event, which indicates that editor is loaded
 			CKEDITOR.on("instanceReady", function(ev)
-			{			 
+			{			 				
+				console.log('CKEditor is ready');
 				if (btnLocation)
 				{				 
 					var prepareCkeInstance = btnLocation.getAttribute('onclick');
@@ -408,26 +617,48 @@ function qa_ajax_error()
 		}
 		
 		// when URL contains number - so user is on topic subsite (not on main or other forum subsite nor asking the new question)
-		if (url > 0)
-		{			
-			// buttons for actions like: Answer, Comment
-			var actionBtns = Array.from(document.querySelectorAll('input[name*="_docomment"]'));
+		if (url > 0 && !(location.href.indexOf('state=') > -1))
+		{		
+			// prepare Array for actions like: Answer, Comment, Edit
+			var actionBtns = [];
+
+			// add Answer buttons
 			actionBtns.push( document.getElementById('q_doanswer') );
-						
-			handleCodeCollapsing();
 			
-			actionBtns.forEach(function(btn)
+			// add Comment buttons
+			Array.from(document.querySelectorAll('input[name*="_docomment"]')).forEach(function(comment)
+			{
+				actionBtns.push( comment );
+			});
+			
+			// add Edit buttons
+			Array.from(document.querySelectorAll('input[name*="_doedit"]')).forEach(function(edit)
 			{
-				btn.addEventListener('click', addListener);
+				actionBtns.push( edit );
 			});
+
+			/*
+			 * 1st argument notify function that the page is not /ask.html - so different blocks of code collapsing method will be used
+			 * 2nd parameter notifies function if it can "turn on" Copy To Clipboard function - so user can copy code inside block within button click
+			 */
+			handleCodeCollapsing(false, prepareClipboardCopying);
+			
+			if (!document.querySelector('.answer'))
+				checkCkeditor(false);
+			
+			else 
+			{
+				actionBtns.forEach(function(btn)
+				{				
+					btn.addEventListener('click', addListener);
+				});
+			}
 		}
 		
-		// when user is creating new question
-		else if (location.pathname.indexOf('ask') > 0)
+		// when user wants to add new question or edit his question/answer/comment
+		else if (location.pathname.indexOf('ask') > -1 || location.href.indexOf('state=edit') > -1)
 		{
-			checkCkeditor(false, true);
-		}
-		////else console.error('Unpredicted Forum URL: ', location.pathname);
-		
+			checkCkeditor(false);
+		}		
 	});	
 }(document));
\ No newline at end of file
diff --git a/forum/qa-theme/SnowFlat/qa-styles.css b/forum/qa-theme/SnowFlat/qa-styles.css
index c09b4030..65049b98 100644
--- a/forum/qa-theme/SnowFlat/qa-styles.css
+++ b/forum/qa-theme/SnowFlat/qa-styles.css
@@ -4604,38 +4604,65 @@ a.sidebarnav:hover {
 
 
 /* collapsing block-code */  
-pre[class*="brush:"]
+
+.syntaxhighlighter-parent, 
+/*pre[class*="brush:"]*/.syntaxhighlighter
 {
 	position: relative;
+	/*min-height: 40px;*/
 }
-pre[class*="brush:"].collapsed
+/*pre[class*="brush:"]*/.syntaxhighlighter.collapsed-block
 {
   	height: 110px;
 	overflow: hidden;
  }
   
-pre[class*="brush:"]::before
+.syntaxhighlighter-additional
+{
+	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3498db+0,3498db+50,3498db+100&0.75+0,1+50,0.75+100 */
+	background: -moz-linear-gradient(left,  rgba(52,152,219,0.75) 0%, rgba(52,152,219,1) 50%, rgba(52,152,219,0.75) 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(left,  rgba(52,152,219,0.75) 0%,rgba(52,152,219,1) 50%,rgba(52,152,219,0.75) 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to right,  rgba(52,152,219,0.75) 0%,rgba(52,152,219,1) 50%,rgba(52,152,219,0.75) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf3498db', endColorstr='#bf3498db',GradientType=1 ); /* IE6-9 */
+
+    /*padding: 2px 0;*/
+    height: 24px;
+    width: /*calc(100% - (45px/1.20))*/ 100%;
+    position: relative;
+    /*left: calc(45px/2);*/
+    border-radius: 50px 50px 1px 1px;
+}
+  
+  /*pre[class*="brush:"]*/.syntaxhighlighter-button/*::before*/
 {
-	content: attr(data-state);
+	/*content: attr(data-state);*/
     color: white;
     position: absolute;
-    padding: 0 5px;
+    /*padding: 2px 10px;*/
     border-radius: 5px;
     background: #3498db;
-    top: 5px;
-    right: 240px;
+    top: 2px;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    width: 85px;
     font-size: 12px;
+    border: 1px solid white;
+    font-weight: bold;
+	outline: none;
 }
 
-pre[class*="brush:"]::after
+
+/*pre[class*="brush:"]*/.syntaxhighlighter-language/*::after*/
 {
-    content: attr(data-lang);
+    font-size: 12px;
     position: absolute;
-    right: 5px;
+    left: /*23px*/ 1.25%;
     top: 2px;
-    border: 1px solid #3498db;
-    padding: 0 5px;
-    background: white;
+    border-radius: 17px 2px;
+    padding: 1px 15px;
+    font-weight: bold;
+    color: white;
 }
 
 /* post content preview */
@@ -4648,24 +4675,28 @@ pre[class*="brush:"]::after
     position: absolute;
 }
 
-.post-preview {
+.post-preview 
+{
     overflow-y: scroll;
     max-height: 70vh;
     width: 585px;
 }
 
-.post-preview-parent {
+.post-preview-parent 
+{
     position: fixed;
     background: white;
     z-index: 11;
     padding: 40px;
+	top: 10vh;
     left: calc(50vw - 585px/2);
-    webkit-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.5);
+    -webkit-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.5);
     -moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.5);
     box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.5);
 }
 
-.close-preview-btn {
+.close-preview-btn 
+{
     position: absolute;
     top: -10px;
     right: -10px;
@@ -4676,4 +4707,73 @@ pre[class*="brush:"]::after
     padding: 4px 6px;
     color: white;
     font-weight: bold;
+}
+
+/*
+ *	Source: http://stackoverflow.com/a/30810322/4983840
+ */
+.content-copy
+{
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 2em;
+	height: 2em;
+	padding: 0;
+	border: none;
+	outline: none;
+	box-shadow: none;
+	background: transparent;
+}
+
+.content-copy-btn
+{
+	background: #2c3e50;
+    position: absolute;
+    color: white;
+    right: /*23px*/ 1.25%;
+    top: 3px;
+    border-radius: 2px /*17px*/ 30px;
+    padding: 2px 15px;
+    font-size: 12px;
+    font-weight: bold;
+    border: none;
+	outline: none;
+}
+
+form div[class$="-item-content"],
+form div.qa-q-view-content
+{
+	position: relative;
+}
+
+.codepen-snippet
+{
+	position: absolute;
+	right: -15px;
+    top: -15px;
+	width: 0;
+	height: 0;
+	/*background: black;*/
+	/*background: url(https://assets.codepen.io/assets/logos/codepen-logo-9c0933e8569e634b75ac2eb808da908d.svg) no-repeat 18px 21px;*/
+	/*width: 125px;
+	height: 50px;*/
+}
+
+.codepen-snippet:hover
+{
+    cursor: pointer;
+}
+
+.codepen-snippet img,
+.codepen-snippet input[type="image"]
+{
+	background: black;
+	border-radius: 10px;
+	padding: 10px;
+	vertical-align: middle;
+	transform: scale(0.5);
+	width: 140px;
+    position: absolute;
+    right: -10px;
 }
\ No newline at end of file