Explanation of the Code:
- C++ Code:
- The C++ code is a simple “Hello, World!” program that uses the
iostreamlibrary to print text to the console.
- The C++ code is a simple “Hello, World!” program that uses the
- HTML Structure:
- The C++ code is inserted inside the
divwithid="editor", which is where the Ace Editor displays it.
- The C++ code is inserted inside the
- JavaScript Initialization:
- Ace Editor is initialized with
ace/theme/cobaltfor the editor theme. - The mode is set to
ace/mode/c_cpp, which enables C++ syntax highlighting.
- Ace Editor is initialized with
- CSS Styling:
- The heading and editor container are styled similarly to previous examples to maintain consistency.
This code can be embedded directly into your website to display the C++ program within a code editor. Users can modify the code within the editor, and it will provide proper C++ syntax highlighting.
#include <iostream>
using namespace std;
int main() {
cout << "Hello, World!" << endl;
return 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h3.question {
font-family: "Roboto", sans-serif;
font-size: 24px;
text-align: center;
font-weight: 100;
}
.editor-container {
width: 900px;
height: 540px;
margin: 20px auto;
position: relative;
}
#editor {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
font-size: 20px;
}
</style>
</head>
<body>
<h3 class="question">Write a simple C++ program</h3>
<div class="editor-container">
<div id="editor">// C++ Program\n#include <iostream>\nusing namespace std;\n\nint main() {\n cout << "Hello, World!" << endl;\n return 0;\n}</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.5.3/ace.js"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/cobalt");
editor.session.setMode("ace/mode/c_cpp");
</script>
</body>
</html>