Develop Reference

Is there a way to append left-indented text in a doc using Google apps script?

I'm trying to append a text in a doc via apps script, but I want the text to start from a specified left indent, and also have subsequent lines aligned with the indent. Currently, I'm using \t to tab the first line, but subsequent lines start on indent 0. I would appreciate if anyone could help figure it out.
Example:
body.appendParagraph('').setLineSpacing(1.5).appendText('\t\t' + 'mylongtext').setItalic(true);

Looking at the available paragraph classes here https://developers.google.com/apps-script/reference/document/paragraph you will need to edit your code as follows:
body.appendParagraph('').setLineSpacing(1.5).setIndentFirstLine(50).setIndentStart(50).appendText('mylongtext').setItalic(true);
Adjust the number in the () as needed for setIndentFirstLine and setIndentStart, which is in pixels.

Apply code highlighter to Textarea

I have a textarea in my website contains PHP code.
I want to make the users able to Modify the code and then Run it.
So, I have made a textarea called modifyCode:
<textarea id="modifyCode"></textarea>
So far I have managed to run the PHP code which is written in the textarea.
BUT, I really like to apply code highlighter to my text box. With this regard, I have tried a couple of ways:
I have tried "highlight.js" --> https://highlightjs.org/
I have tried "codemirror" --> https://codemirror.net/
Not only I can't get my PHP code to be highlighted, but also it can't be running anymore.
I need to mention that the same method is working fine to highlight XML code, but it won't run too!
As far as I understood, when we apply these code highlighters, the textarea will not act like a textarea anymore. So, is there anyway that I can highlight my PHP code and then run it?

A way to encounter with this issue is to make an middle DIV called modifyCodeDiv:
<div id="modifyCodeDiv" contenteditable="true"></div>
modifyCodeDiv is getting the value of modifyCode textarea:
document.getElementById("modifyCodeDiv").innerHTML =
document.getElementById("modifyCode").value;
So, users can modify the code in the div modifyCodeDiv.
To execute the code, you need to send the value of modifyCodeDiv to modifyCode. As div does not have value attribute, you need to do:
var my_element = document.getElementById('modifyCodeDiv');
var my_str = my_element.innerText || my_element.textContent;
document.getElementById("modifyCode").value = my_str;
Furthermore, you can apply highlight.js to your div modifyCodeDiv.

Replace parts of string (attributes) in textarea using input boxes

Main Target :
To create a website that will have a live preview of an HTML/CSS code.
More specifically :
The HTML/CSS code will be editable form the user in some specific parts. So, the code in the live preview will not derive from text areas but from divs.
Image of what I am trying to do :
So, in my Previous Question I tried to find a way to make the live preview box work after getting the code from the black boxes. It did not work because the code was given in a div tag and not a textarea. I would like to add that the code in the div tags use xmp tags because some parts are editable from the user.
Now, I have replaced the divs with textarea tags but the EDIT function does not work.
Main Question :
How do I edit parts of a textarea text? Below, I made it work for a div tag but not a textarea. How can I make the following work for a textarea?
$('input#thebox1').keypress(function(e) {
console.log($(this).val());
if(e.which == 13 && $(this).val().length > 0) {
var c = $(this).val();
$('.popup1').removeClass().addClass(c).text(c);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Replace Title Background Color: </div><input type="text" id='thebox1'>
<div id="copyTarget1" class="innerbox css">
<blockquote>
<pre>
<code>
.title
{
background: #<b class="popup1" style="color:#FF0000;">value </b>;
vertical-align: middle;
}
</code>
</pre>
</blockquote>
</div>
<br><br><br><br><br><br>

I thought about taking another approach to make your life easier using Ace (Cloud9 Editor). It is an awesome solution to get code editors for different languages. All built in JavaScript. It is quite easy to integrate. I just downloaded it to create the case you are trying to build.
You can find the example I have just made here: https://dubaloop.io/dev/html_css_js_editor/
Basically, you load the library for ace:
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
Then you create a "pre" container for your HTML, CSS, JavaScript editor:
<pre class="editor" id="editor_js">
function foo(items) {
alert('works');
}</pre>
You will be able to convert them into code editor by using the function:
var editor_js = ace.edit("editor_js");
editor_js.setTheme("ace/theme/monokai");
editor_js.session.setMode("ace/mode/javascript");
It will generate a nice code editor that can through error, warnings, etc. You also have different themes. It is very user friendly as you could see. In my example I just get the content of each code container and send it to an blank iframe that. In order to retrieve the content you can use:
editor_js.getValue();
Check the source code for example I sent you above. I also created .zip with the example here: https://dubaloop.io/dev/html_css_js_editor/example.zip
Have a look to see if this would work for you.
GitHub repo for ACE: https://github.com/ajaxorg/ace-builds
I hope it helps.
UPDATE:
I decided to update the response to replay to your last comment. A few things about it:
First, I updated the code in the link I sent you previously: https://dubaloop.io/dev/html_css_js_editor/
The idea was to check the guide to see how you can manipulate the input and adjust it to what you need. They have great manipulation options. This is the guide: https://ace.c9.io/#nav=howto&api=editor
I just made a short version of what you are trying to do: I am replacing the content for the <h1> in HTML editor, by entering it in a textfield input; similar to what you are trying to achieve. I set the html code editor as a readonly so you cant edit on it. Have a look and let me know.
Second, I created another example using your code. You can check it here: https://dubaloop.io/dev/html_css_js_editor/example.html
I noticed that the first problem you were having was related to how you were triggering the preview update ($('.innerbox').on("keyup"...)). There was not keyup event there. For now I set it on any input when you hit enter. The other big problem, and probably the main one you had was how you were accessing the iframes through jQuery. You need to use $('selector').contents().find('selector2'). Finally another problem was the you were retrieving the data getting the attribute value from your code wrapper. What you need to get is the actual content as flat text in order to avoid other html content. In order to do that you need to use .text() (Please check the updated GetHtml() and GetCss() functions).
I hope you can make it work from here. Still, I like option 1 :P
I hope it helps.

how to retrieve a line of text from ACE editor?

I integrated ACE editor in my site. I want to retrieve the text in a certain line. I've searched and found This and This. But unfortunately, I can't understand those, as I'm a newbie to the subject. Can anyone give an example for it ?
I got the lines to an array using the following code.
var line = document.getElementsByClassName("ace_line");
Are there any methods like
line[count].getValue
Which can return the string of the text in that line ?

You need to call
line0 = editor.session.getLine(0);
using getElementsByClassName("ace_line") or similar won't work since
ace creates DOM elements only for visible lines.
text content of the DOM element is different from the text in document since tabs and some other characters are replaced by spaces.

line[count] already returns the DOM element of that line. So all you have to do is to extract the plain text from that element. if you are using jQuery you could do:
To get the text of the first line for example (line[0])
var lineText = line[0].text();
If you are not using jQuery and want to do that in javascipt:
var lineText = line[0].innerHTML.replace(/<[^>]*>/g, "");

Manually highlight a specific section in javascript SyntaxHighlighter

I am using the Syntax highlighter library to display code on a webpage. I would like to highlight certain sections of code in response to various events on the page. It may be a single character, or a multiple line section, but it will always be a contiguous section of text.
I know that SyntaxHighlighter has functionality to highlight individual lines, but I need a little more fine grained control than that.
I know the selection start and selection length points in the original source code, but the highlighter has inserted a lot of html elements, so it is a bit difficult to find those indexes again to wrap them in another tag.
Is there a good way I can override existing formatting, and apply my own css to a specific portion of the text? Is there a different syntax highlighting plugin that may give me what I need?

How about running the generated markup through a function that searches and replaces the specific 'programmatic word' with,
<span class="customHighlight">word</span>
..and you can style it as follows,
span.customHighlight {
background:#FAFAD2;
color:#000;
}
I sort of worry about the efficiency of this though.
EDIT: I've got something, if you look at the source of the script relative to the highlighter for a language (here, CSS), http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushCss.js,
{ regex: /!important/g,
css: 'color3' }, // !important
..which renders as,
<code class="css color3">!important</code>
..so, just define your 'word' as a rule with an equivalent CSS declaration.

You can use jQuery as in example http://www.tripbase.com/code/highlightTutorial.html. According to me provide a textbox and onchange event send the highlighted text to the function and the function will highlight the text
For your highlight and un-highlight jquery just visit bartaz.github.com/sandbox.js/jquery.highlight.html