Top community members
All Wiki Articles Create Wiki Article

In the past we had a dream,
to have place where we could share IT knowledge,
to ask questions without fear that someone will judge us.

Now we are a group of people who make this dream come true. ❤ 💻

If you think sharing knowledge and helping other is valuable.

join our community - Click here

JavaScript - ini file with CodeMirror

0 contributions
14 points

Using CodeMirror with JavaScript it is possible to use *.ini file syntax in following way.

Note: to highlight *.ini file text it is necessary to attach properties mode.

1. INI file with CodeMirror and text variable example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/properties/properties.min.js"></script>
  </head>
<body>
  <div id="placeholder"></div>
  <script>

    var placeholder = document.getElementById('placeholder');

    var editor = CodeMirror(placeholder, {
        mode:  'text/x-ini',
        readOnly: false,
        lineNumbers: true,
        lineWrapping: false
    });

    var text = '; this is first comment\n' +
        '\n' +
        '[user]\n' +
        'name=John\n' +
        'description=This is simple description.\n' +
        'age=25\n' +
        'gender=male\n' +
        'role=student\n' +
        '\n' +
        '[http]\n' +
        '; this is second comment\n' +
        'server=dirask.com\n' +
        'port=80';

    editor.setValue(text);

  </script>
</body>
</html>

2. INI file autodetection with CodeMirror and text variable example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/properties/properties.min.js"></script>
  </head>
<body>
  <div id="placeholder"></div>
  <script>

    var placeholder = document.getElementById('placeholder');

    // CodeMirror detects automatically file type
    var editor = CodeMirror(placeholder, {
        readOnly: false,
        lineNumbers: true,
        lineWrapping: false
    });

    var text = '; this is first comment\n' +
        '\n' +
        '[user]\n' +
        'name=John\n' +
        'description=This is simple description.\n' +
        'age=25\n' +
        'gender=male\n' +
        'role=student\n' +
        '\n' +
        '[http]\n' +
        '; this is second comment\n' +
        'server=dirask.com\n' +
        'port=80';

    editor.setValue(text);

  </script>
</body>
</html>

3. INI file with CodeMirror and textarea element example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/properties/properties.min.js"></script>
  </head>
<body>
  <textarea id="textarea">; this is first comment

[user]
name=John
description=This is simple description.
age=25
gender=male
role=student

[http]
; this is second comment
server=dirask.com
port=80</textarea >
  <script>

    var textarea= document.getElementById('textarea');

    var editor = CodeMirror.fromTextArea(textarea, {
        mode:  'text/x-ini'
    });

  </script>
</body>
</html>

4. INI file autodetection with CodeMirror and textarea element example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/properties/properties.min.js"></script>
  </head>
<body>
  <textarea id="textarea">; this is first comment

[user]
name=John
description=This is simple description.
age=25
gender=male
role=student

[http]
; this is second comment
server=dirask.com
port=80</textarea >
  <script>

    var textarea= document.getElementById('textarea');

    // CodeMirror detects automatically file type
    var editor = CodeMirror.fromTextArea(textarea, {});

  </script>
</body>
</html>

See also

  1. CodeMirror CDN - cdnjs.com WebPage

References

  1. INI files / Properties files mode - CodeMirror Docs
0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more