Pen Settings

JavaScript

Babel includes JSX processing.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

Flutter

              
                // blog: https://kawa.dev
// github: https://github.com/kawa1214 

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

TextStyle textStyle(String text) {
  String _textTag = text.split(" ").first;

  TextStyle _h1 = TextStyle(color: Colors.black, fontSize: 32);
  TextStyle _h2 = TextStyle(color: Colors.black, fontSize: 26);
  TextStyle _p = TextStyle(color: Colors.black, fontSize: 16); 
 
 switch (_textTag) {
   case "#":
     return _h1;
     break;
    case "##":
      return _h2;
      break;
   default:
    return _p;
 }
}

class CustomTextEditingController extends TextEditingController {
  CustomTextEditingController({String text}) : super(text: text);

  @override
  TextSpan buildTextSpan({TextStyle style, bool withComposing}) {
    List _splitTextList = text.split("\n");

    return TextSpan(
        children: <TextSpan>[
          for (String item in _splitTextList) 
            TextSpan(
              text: item + "\n",
              style: textStyle(item),
            ),
        ]
      );
   }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    TextEditingController _textEditingController = CustomTextEditingController();
    return Scaffold(
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(100.0),
            child: TextField(
              enabled: true,
              keyboardType: TextInputType.multiline,
              minLines: null,
              maxLines: 20,
              autocorrect: false,
              showCursor: false,
              decoration: InputDecoration(
                hintMaxLines: null,
                border: InputBorder.none,
                hintStyle: TextStyle(fontSize: 20.0, color: Colors.grey),
                hintText: "Input Markdown Text \nexample) # h1 ## h2 notTag",
              ),
              obscureText: false,
              controller: _textEditingController,
            ),
        ),
      ),
    );
  }
}

              
            
!
999px

Console