Text Editor pattern.

November 2, 2023 ยท View on GitHub

Show a code editor.


Deprecated

This pattern is deprecated. Use Patternslib's pat-code-editor instead.


Configuration

OptionTypeDefaultDescription
themestringnullTheme to use with editor. defaults to whatever it ships with.
modestringWhat type of syntax is it?text
widthinteger500Width of the editor.
heightinteger200Height of the editor.
tabSizeinteger4TODO
softTabsbooleantrueUse spaces for tabs.
wrapModebooleanfalseWrap text.
showGutterbooleanTODOtrue
showPrintMarginbooleanShow print margin.false
readOnlybooleanRead only editor.false

Examples

Default

foobar
<pre class="pat-texteditor" data-pat-texteditor="theme:clouds">
foobar
</pre>

Different theme

var foo = 'bar';
function foobar() {
 return foo;
}
<pre class="pat-texteditor" data-pat-texteditor="mode:javascript;theme:dawn;">
var foo = 'bar';
function foobar() {
 return foo;
}
</pre>

Different options

var foo = 'bar';
function foobar() {
 return foo;
}
<pre
    class="pat-texteditor"
    data-pat-texteditor="mode:javascript;
                  theme:ambiance;
                  tabSize:2;
                  showGutter:false;
                  showPrintMargin:true;"
>
var foo = 'bar';
function foobar() {
 return foo;
}
</pre>