10000 Improve code appearance and copyediting on docs by taion · Pull Request #697 · react-bootstrap/react-bootstrap · GitHub
[go: up one dir, main page]
Skip to content

Improve code appearance and copyediting on docs #697

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
May 18, 2015
Merged

Improve code appearance and copyediting on docs #697

merged 1 commit into from
May 18, 2015

Conversation

taion
Copy link
Member
@taion taion commented May 18, 2015

Fixes #94

@dozoisch
Copy link
Member

👍

taion added a commit that referenced this pull request May 18, 2015
@taion
Merge pull request #697 from taion/docs-code-highlight
3738a4c 
Improve code appearance and copyediting on docs
@taion taion merged commit 3738a4c into react-bootstrap:master May 18, 2015
@taion taion deleted the docs-code-highlight branch May 18, 2015 23:53
@mtscout6
Copy link
Member

@joemcbride Did you see this one?

@mtscout6
Copy link
Member

Doesn't look like the mixed html content really helped that much:
screen shot 2015-05-18 at 8 31 14 pm

--EDIT--

Nevermind, this is how it looks in production now.

@taion
Copy link
Member Author
taion commented May 19, 2015

It's worth noting that we might want to revise this to use codemirror/addon/runmode/runmode.node.js so that the syntax highlighting doesn't have that noticeable delay on the browser side.

The htmlmixed mode is actually just for the parts of the "Introduction" and "Getting Started" pages that are actually displaying HTML. That odd syntax highlighting is just the normal CodeMirror JavaScript mode behavior.

@mtscout6
Copy link
Member

Fair enough, and I was thinking that delay in rendering was partly due to it not getting rendered server side when we generate the docs. @joemcbride Has been doing some work in this area to build this component in another library since we need it internally at work for our application's style guide. Ideally we would be able to move to use that and improve changes there. See: https://github.com/joemcbride/react-playground

Joe and I have talked about transferring it here to the org once it had matured enough, but I don't know where he stands with that at the moment. I can check with him on that in the morning.

@taion
Copy link
Member Author
taion commented May 19, 2015

The code path for applying syntax highlighting to a code block (the runMode bit that I'm using here) is unfortunately not the same as the path for applying syntax highlighting to a textarea. I think only the former can be used server-side.

@taion
Copy link
Member Author
taion commented May 19, 2015

I played around with the Node version of runMode but I couldn't figure out how to actually get any modes loaded. I'm okay with this for now, but I agree that the equivalent of CodeExample can find a happy home in something like react-playground.

@joemcbride
Copy link
Member

This is a nice little component. I wasn't aware of the node runMode. I'll look into enabling that with the textarea. I think adding a component like CodeExample would fit perfectly into the react-playground project.

@taion
Copy link
Member Author
taion commented May 19, 2015

FWIW I already do use runMode in the CodeMirrorEditor component as the mobile fallback. I don't think it will work well with textareas per se... CodeMirror does a lot of other stuff for its editor blocks than just the markup injection.

The nice thing with runMode is the 3rd arg can be a callback, which will let you use React to render an array of span elements with the markup... should be great for server-side rendering of examples, but you cannot import the provided mode files on the server, because they end up importing the main CodeMirror lib, which does some browser-specific things.

@mtscout6 mtscout6 mentioned this pull request May 20, 2015
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

code in Getting Started docs should be syntax highlighted
4 participants
@taion @dozoisch @mtscout6 @joemcbride
0