Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Aug 16, 2025. It is now read-only.

docs: Refactor documentation to use Markdown with CSS-based components#467

Open
PrasadBhat4 wants to merge4 commits intocoderabbitai:main
base:main
Choose a base branch
Loading
fromPrasadBhat4:PrasadBhat4/configure-coderabbit-docs-improvements
Open
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
235 changes: 235 additions & 0 deletionssrc/components/YamlEditor/YamlEditor.module.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
.yamlEditorContainer {
margin: 1rem 0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.yamlEditor {
border-radius: 8px;
font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace !important;
font-size: 14px !important;
line-height: 1.5 !important;
}

/* Dark theme styling to match the image - using higher specificity */
.yamlEditor .ace_editor,
.yamlEditor .ace_editor.ace_terminal,
.yamlEditor .ace_scroller,
.yamlEditor .ace_content {
background-color: #000000 !important;
color: #ffffff !important;
}

.yamlEditor .ace_gutter,
.yamlEditor .ace_editor.ace_terminal .ace_gutter {
background-color: #000000 !important;
color: #6c6c6c !important;
border-right: 1px solid #404040 !important;
}

.yamlEditor .ace_gutter-active-line,
.yamlEditor .ace_editor.ace_terminal .ace_gutter-active-line {
background-color: #404040 !important;
}

.yamlEditor .ace_line,
.yamlEditor .ace_editor.ace_terminal .ace_line {
background-color: #000000 !important;
}

.yamlEditor .ace_cursor,
.yamlEditor .ace_editor.ace_terminal .ace_cursor {
color: #ffffff !important;
}

.yamlEditor .ace_selection,
.yamlEditor .ace_editor.ace_terminal .ace_selection {
background-color: #44475a !important;
}

.yamlEditor .ace_selected-word,
.yamlEditor .ace_editor.ace_terminal .ace_selected-word {
background-color: #44475a !important;
}

.yamlEditor .ace_active-line,
.yamlEditor .ace_editor.ace_terminal .ace_active-line {
background-color: #44475a !important;
}

/* Additional overrides for all possible background elements */
.yamlEditor .ace_layer,
.yamlEditor .ace_text-layer,
.yamlEditor .ace_marker-layer,
.yamlEditor .ace_cursor-layer {
background-color: #000000 !important;
}

/* Global override for any remaining elements */
.yamlEditor * {
background-color: transparent !important;
}

.yamlEditor .ace_editor,
.yamlEditor .ace_editor *,
.yamlEditor .ace_scroller,
.yamlEditor .ace_content {
background-color: #000000 !important;
}

/* YAML syntax highlighting to match the image - using higher specificity */
.yamlEditor .ace_comment,
.yamlEditor .ace_editor.ace_terminal .ace_comment {
color: #999999 !important;
font-style: italic !important;
}

/* Target lines that start with # (comments) */
.yamlEditor .ace_text-layer .ace_line:first-child,
.yamlEditor .ace_text-layer .ace_line:first-child * {
color: #999999 !important;
font-style: italic !important;
}

/* More specific targeting for any element containing comment-like content */
.yamlEditor [class*="comment"],
.yamlEditor [class*="Comment"] {
color: #999999 !important;
font-style: italic !important;
}

.yamlEditor .ace_string,
.yamlEditor .ace_editor.ace_terminal .ace_string {
color: #ff84d6 !important;
}

.yamlEditor .ace_constant.ace_numeric,
.yamlEditor .ace_editor.ace_terminal .ace_constant.ace_numeric {
color: #b5cea8 !important;
}

.yamlEditor .ace_constant.ace_language,
.yamlEditor .ace_editor.ace_terminal .ace_constant.ace_language {
color: #569cd6 !important;
font-weight: bold !important;
}

.yamlEditor .ace_variable,
.yamlEditor .ace_editor.ace_terminal .ace_variable {
color: #ffffff !important;
}

.yamlEditor .ace_keyword,
.yamlEditor .ace_editor.ace_terminal .ace_keyword {
color: #ffffff !important;
}

.yamlEditor .ace_storage,
.yamlEditor .ace_editor.ace_terminal .ace_storage {
color: #ffffff !important;
}

.yamlEditor .ace_entity.ace_name.ace_tag,
.yamlEditor .ace_editor.ace_terminal .ace_entity.ace_name.ace_tag {
color: #ffffff !important;
}

.yamlEditor .ace_markup.ace_heading,
.yamlEditor .ace_editor.ace_terminal .ace_markup.ace_heading {
color: #ffffff !important;
}

/* Light theme support */
[data-theme="light"] .yamlEditor .ace_editor {
background-color: #ffffff !important;
color: #24292e !important;
}

[data-theme="light"] .yamlEditor .ace_gutter {
background-color: #f6f8fa !important;
color: #6a737d !important;
border-right: 1px solid #e1e4e8 !important;
}

[data-theme="light"] .yamlEditor .ace_gutter-active-line {
background-color: #f6f8fa !important;
}

[data-theme="light"] .yamlEditor .ace_line {
background-color: #ffffff !important;
}

[data-theme="light"] .yamlEditor .ace_cursor {
color: #24292e !important;
}

[data-theme="light"] .yamlEditor .ace_selection {
background-color: #c8e1ff !important;
}

[data-theme="light"] .yamlEditor .ace_selected-word {
background-color: #c8e1ff !important;
}

[data-theme="light"] .yamlEditor .ace_active-line {
background-color: #f6f8fa !important;
}

[data-theme="light"] .yamlEditor .ace_comment {
color: #999999 !important;
}

[data-theme="light"] .yamlEditor .ace_string {
color: #032f62 !important;
}

[data-theme="light"] .yamlEditor .ace_constant.ace_numeric {
color: #005cc5 !important;
}

[data-theme="light"] .yamlEditor .ace_constant.ace_language {
color: #d73a49 !important;
font-weight: bold !important;
}

[data-theme="light"] .yamlEditor .ace_variable {
color: #005cc5 !important;
}

[data-theme="light"] .yamlEditor .ace_keyword {
color: #d73a49 !important;
}

[data-theme="light"] .yamlEditor .ace_storage {
color: #d73a49 !important;
}

[data-theme="light"] .yamlEditor .ace_entity.ace_name.ace_tag {
color: #005cc5 !important;
}

[data-theme="light"] .yamlEditor .ace_markup.ace_heading {
color: #005cc5 !important;
}

/* Responsive design */
@media (max-width: 768px) {
.yamlEditor {
font-size: 12px !important;
}

.yamlEditorContainer {
margin: 0.8rem 0;
}
}

@media (max-width: 480px) {
.yamlEditor {
font-size: 11px !important;
}

.yamlEditorContainer {
margin: 0.6rem 0;
}
}
14 changes: 10 additions & 4 deletionssrc/components/YamlEditor/YamlEditor.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -18,11 +18,15 @@ import React, { useState, useEffect } from "react"

import AceEditor from "react-ace"
import "ace-builds/src-noconflict/theme-github"
import "ace-builds/src-noconflict/theme-monokai"
import "ace-builds/src-noconflict/theme-terminal"
import "ace-builds/src-noconflict/ext-language_tools"

import "ace-builds/webpack-resolver"
import "ace-builds/src-noconflict/mode-yaml"

import styles from "./YamlEditor.module.css"

import jsYaml from "js-yaml"

import Ajv from "ajv"
Expand DownExpand Up@@ -58,7 +62,7 @@ export default function YamlEditor() {

function validateAndSetAnnotations(yaml) {
try {
const doc = jsYaml.load(yaml, { strict: true })
const doc = jsYaml.load(yaml)
const isValid = validate(doc)

if (!isValid && validate.errors) {
Expand DownExpand Up@@ -151,24 +155,26 @@ export default function YamlEditor() {
}

return (
<div className="m4">
<div className={styles.yamlEditorContainer}>
<AceEditor
mode="yaml"
theme="github"
theme="terminal"
onChange={onChange}
value={value}
name="yaml-editor"
className={styles.yamlEditor}
editorProps={{ $blockScrolling: true }}
setOptions={{
useWorker: false,
showPrintMargin: false,
showGutter: true,
fontSize: 14,
fontFamily: "'Monaco', 'Menlo', 'Ubuntu Mono', monospace",
}}
annotations={annotations}
width="100%"
height="400px"
/>
<br />
</div>
)
}
Loading
Loading
[8]ページ先頭
©2009-2025 Movatter.jp