I used syntaxhighlighter in my front web page to highlight code. But I came across a question that the word in the code isn't wrapped when the code length is longer than the length of the <div>.
then I googled it. And found a way mentioned below:
pre,code{
white-space:pre-wrap;/*css-3*/
white-space:-moz-pre-wrap;/*Mozilla,since1999*/
white-space:-pre-wrap;/*Opera4-6*/
white-space:-o-pre-wrap;/*Opera7*/
word-wrap:break-word;/*InternetExplorer5.5+*/
}
However, a new problem appeared, the line number is not corresponding to the actual code line：
My question is:
How can I avoid the code overflows while keep the code line be corresponding to the actual original code line?
You can use CodeMirror editor. It has a lot of feature support including word wrap and read-only like the Sublime Text Editor.
I guess it does correspond the original code lines. Because of the wrapping you are getting messed up with the numbering. Try wrapping the code with JavaScript - add new line symbol \n and and caret returning symbol \r (depends on your programming environment and its settings) and see if it helps.
You have to make some changes to the JavaScript, too.
It's explained at the bottom of the comment section here, including a demonstration in jsfiddle: https://bitbucket.org/alexg/syntaxhighlighter/issue/182/version-3-making-code-wrap
Related
I resently found out that in chrome you can highlight text in the link. This can be done by adding #:~:text= to the link. Example: This link does not highlight anything while This link highlights my chosen context. Since I discoverd this I'm using it all the time for showing somthing to a colleague.
My question is what is the browser suport for this? And if I try to highlight a whole paragraph it doesn't work, so what is the limmit?
I searched for a while without anny sucess.
Edit
After long trying i found that there is not a spesivic limit to this. It stops at a dot F.E. This is will work. and if i go farther like This won't bequse the text im searching goes trough after the first dot!
Edit 2
Having another look at the documentation I saw that you can add a begin and end preifelx. When useed you can select a whole paragraph like This.
[For ongoing detailed browser support information: Scroll-To-Text Fragment support on Can I use]
Well, after some obscure googling I got this
TL;DR - it's a very interesting chrome-specific feature Scroll To Text Fragment. As mentioned here there is no support in other browsers, albeit IE/Edge is in "public support" state (as they say, it used to be in IE5). Documentation is here, and I don't see any size limits. Maybe the problem is in line break/begin-end paragraph special symbols handling?
UPD: other idea: there was a limit on GET-request length - 2,048 characters. Now it should be bigger, but maybe chrome still somehow cut/doesn't process too long URLs?
UPD2: The first guess is right. This link to wikipedia works, albeit this, only one character more, doesn't. The problem is in 0A/0D "carrage return/line feed" characters: if they are present in text, even encoded, highlight won't work at all. Possibly it's a bug and should be reported to Chrome, but still. Good thing for checking this is to paste selected text in Chrome "Search" tool: if it doesn't find pasted text and you see some strange characters - whoopsie.
There is issue related to CKEditor paragraph spacing. If I'm typing in ckeditor, it works fine. If I copy paste something from browser, it works fine. But when I copy paste something from word file, I get large space between two paragraphs. So I manually need to remove a extra line between two paragraphs. I have searched on internet for solution. And I got some solutions too. But none of them is working for copy/paste from word file. I have tried these solutions.
Solution 1
Solution 2
These solution are working fine to solve issue while manually typing or copy/paste form browser. But not working for copy/paste from word file. And I can't understand why this happens. If any one knows the answer, it will be appreciated.
Use Paste from Word option on menu bar of CKEditor.
That way you will receive MS Word formatted text converted to WEB formatting.
Usually when copying text from some text pre-processors (like Word, Excel...) you will copy some hidden formatting (like inline CSS, additional markup and so on). When pasting to CKEditor directly all these additions are left as is and it leads to broken layout, that's why you need to first process this copied text and only than put it in text.
I am currently in the process of updating a site to be more responsive/mobile friendly. I have everything working wonderfully with one exception, <pre> formatted code samples. The content is being served by a blog engine, and the difference is entirely between themes. Reverting to the original theme, everything worked great again.
Here is the original display of <pre> code samples properly formatted:
Here is the underlying element's markup as seen by Chrome:
After updating the CSS however, pre formatted code isn't displaying properly, instead it appears like this:
In Chrome, the CSS is virtually identical:
For some reason with the new layout/markup, I simply cannot get the formatting to work properly, even though the styles being applied to the pre tag are effectively identical. I've tried setting white-space: pre and white-space: pre-wrap, at various levels with no effect. I added word-wrap to support resizing existing content down, removing or adding it has no effect. I've tried changing the display: type, the parent container, changing overflow types, etc. All to no effect. I simply can't figure out why the <pre> tags seems to be ignoring the whitespace settings.
FYI, the site link is here if you are interested. The original CSS theme is here, and the new CSS theme is here. You can see a screwed up source example here.
EDIT to add calculated CSS results, although it all appears to be minor formatting differences:
Good/old calculated:
New/broken calculated:
EDIT -- SOLUTION
It ended up being the Render() method of a MasterPage for a BlogEngine theme has logic to strip whitespaces from the rendered results. So CSS and whitespace was a red herring, there was no whitespace to strip.
It seems the formatting in your example got messed up. The whitespace directives doesn't do anything, because there actually is no whitespace left to preserve. I downloaded your page and quickly added some newlines and tabs. Now the first few lines look correctly (just as far as I added formatting):
Here is the diff between the two versions of the html document: http://pastebin.com/KTh9BTGi (Ignore the "no newline at end of file" part). Maybe you added some code on the server that removes newlines and unnecessary spaces?
Well, it seems any HTML tag was not closed properly on the new HTML Theme markup.
If you are editing your blog on the browser, copy/paste the html code into a great text editor with language syntax support and verify if syntax highlight gets crazy at some line.
In Google Chrome, you can use shortcuts for elements with contenteditable='true':
CTRL + B : Set the highlighted text to bold, for example
What happens under the hood is, the <b> tag is attached or removed to the marked phrase, word whatever.
How is this done? Where do "they" know from, whether the element is already set to bold, and, primary question, where it is located?
I am asking this because i can't get rid of this problem, mentioned earlier today:
Get the highlighted text position in .html() and .text()
Edit:
I tried the following
Rich-Text-Editing
But first, it won't load correctly, but this should be caused by my own failure.
Second, for learning purposes, i would like to implent my own minified version.
As i am really at JavaScript, i could not figure out how this is be done.
document.getSelection() / window.getSelection() should work for whatever you'd like to do with the selected stuff.
Element styles get inherited. How this is kept track of depends on the CSS implementation.
Taking a look at the source code of Chrome might pretty much help.
In my web application I intend to shorten a lengthy string of HTML formatted text if it is more than 300 characters long and then display the 300 characters and a Read More link on the page.
The issue I came across is when the 300 character limit is reached inside an HTML tag, example: (look for HERE)
<a hreHERE="somewhere">link</a>
<a hre="somewhere">liHEREnk</a>
When this happens, the entire page could become ill-formatted because everything after the HERE in the previous example is removed and the HTML tag is kept open.
I thinking of using CSS to hide any overflow beyond a certain limit and create the "Read More" link if the text is beyond a certain number, but this would entail me including all the text on the page.
I've also thought about splitting the text at . to ensure that it's split at the end of a sentence, but that would mean I would include more characters than I needed.
Is there a better way to accomplish this?
Note: I have not specified a server side language because this is more of a general question, but I'm using ASP.NET/C# .
Extract the plaintext from the HTML, and display that. There are libraries (like the HTML Agility Pack for .NET) that make this easy, and it's not too hard to do it yourself with an XML parser. Trying to fix a truncated HTML snippet is a losing cause.
One option I can think of is to cut it off at 300 characters and make sure the last index of '<' is less than the last index of '>'. If it is, truncate the string right before the last instance of '>', then use a library like tidy html to fix tags that are orphaned (like the </a> in the example).
There are problems with this though. One thing being if there are 300 chars worth of nothing but HTML - your summary will be displayed as empty.
If you do not need the html to be displayed it's far easier to simply extract the plain text and use that instead.
EDIT: Added using something like tidy html for orphaned tags. Original answer only solved cutting thing mid-tag, rather than within an opening/closing tag.